Vertically Center Slick slide, content with background-image

index.html

<!--
  Uses Bootstrap 3.x framework for grids, but you can adapt this to any Framework if you want.
  It also uses jQuery Slick as a slider.
  Everything is "auto-with" and "auto-height", which means no restrictions on width or height.
  Works fine from tablets and more. Not suggested on Mobile, or at least, needs some fixes.
-->
<div class="slider-with-text-block">
  <div class="slick-slider">
    <div class="slick-slide">
      <img class="img-responsive" src="..." alt="">
      <div class="slide-content">
        <div class="container">
          <div class="row">
            <div class="col-sm-2 hidden-xs"></div>
            <div class="col-xs-12 col-sm-8">
              <h3>Lorem Ipsum</h3>
              <p>Lorem ipsum dolor sit amet</p>
              <a class="btn btn-link" href="#">Foo</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

script.js

(function($){
  $(function(){
    var $window = $(window),
        $html = $('html'),
        $body = $('body'),
        $sliderWithTextBlock = $('.slider-with-text-block .slick-slider');

    $sliderWithTextBlock
    .slick();
  });
})(jQuery);

style.scss

.slider-with-text-block {
  .img-responsive {
    width: 100%;
  }
  // Move the slide content on the left, but vertically centered
  @media ( min-width: $screen-sm-min ) {
    .slick-slide {
      position: relative;

      .slide-content {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 10%;
        right: 10%;
        padding: 0;

        .container {
          height: 100%;
        }
        .row {
          display: table;
          table-layout: fixed;
          width: 100%;
          height: 100%;

          > div {
            display: table-cell;
            vertical-align: middle;
            float: none;
          }
        }
      }
    }
  }
}