Почему не работает margin:auto 0 у слайдера?

position: relative;
top: 50%;
transform: translateY(-50%);

и удалите margin

Используйте ныне популярный Flexbox. Задайте для .slick-slide вот такой набор стилей:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; 
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;

В целом, добавив только display:flex все сразу выстраивается в нужный порядок:

margin: 0 auto

выравнивает блок по горизонтали.

Для того, чтоб выровнять блок по вертикали есть несколько вариантов:

position: relative; 

для родителя, для дочернего элемента:

position: absolute;
top: 50%;
margin-top: -0.625em;

Тут подробнее

* { 
box-sizing: border-box; 
line-height: 1.25; 
} 
 
.container { 
  position: relative; 
 width: 30%; 
 height: 400px; 
  background: black; 
  } 
   
  .block { 
    width: 100px; 
    height: 100px; 
    border-radius: 50%; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-left: -50px; 
    margin-top: -50px; 
    background: red; 
   
   
  }

<div class = "container"> 
  <div class = "block"> 
   
  </div> 
</div>

Добавил пример, если знаем высоту элемента, который размещаем по центру. Смещаем на половину его высоты вверх.

.outer { 
    position: relative; 
    height: 5em; 
    border: 1px solid blue; 
  } 
 
  .inner { 
    position: absolute; 
    top: 50%; 
    margin-top: -0.625em; 
    border: 1px solid red; 
  }

<div class="outer"> 
  <div class="inner">Текст</div> 
</div>

Если нужно размещать текст..