Contenuti allineati verticali slickslider

Question

Ho faticato a far allineare il mio contenuto in verticale, ma in realtà non lo aggiusto. Ho provato il parametro adaptiveHeight ma in realtà non ha fatto ciò che volevo.

Fiddle: http://jsfiddle.net/fmo50w7n/400

Questo è ciò che il codice è simile HTML:

<section class="slider"> 
    <div style="width:500px;height:200px">slide1</div> 
    <div style="width:500px;height:300px;">slide2</div> 
    <div style="width:500px;height:100px;">slide3</div> 
</section> 

CSS:

$c1: #3a8999; 
$c2: #e84a69; 

.slider { 
    width: auto; 
    margin: 30px 50px 50px; 
} 

.slick-slide { 
    background: $c1; 
    color: white; 
    padding: 40px 0; 
    font-size: 30px; 
    font-family: "Arial", "Helvetica"; 
    text-align: center; 
} 

.slick-prev:before, 
.slick-next:before { 
    color: black;  
} 

.slick-dots { 
    bottom: -30px; 
} 


.slick-slide:nth-child(odd) { 
    background: $c2; 
} 

JS:

$(".slider").slick({ 
    autoplay: true, 
    dots: true, 
    variableWidth:true, 
    responsive: [{ 
     breakpoint: 500, 
     settings: { 
      dots: false, 
      arrows: false, 
      infinite: false, 
      slidesToShow: 2, 
      slidesToScroll: 2 
     } 
    }] 
}); 

Answer 1

Penso che sia necessario inserire del testo, il contenuto nei paragrafi o nelle intestazioni, ciò consente di comunicare solo con i contenuti specifici anziché con l'intero div.

Poi nel CSS fare questo:

p { 
    margin: auto; 
    position: absolute; 
    top: 50%; left: 50%; 
    -webkit-transform: translate(-50%,-50%); 
     -ms-transform: translate(-50%,-50%); 
      transform: translate(-50%,-50%); 
} 

potrebbe essere necessario dare una larghezza pure.

Ciò che fa è cambiare l'origine di dove il paragrafo è generato non dall'angolo in alto a sinistra, ma dal centro dell'elemento usando transform: translate. Quindi usa il posizionamento assoluto e le percentuali superiore e sinistra al 50% per allinearlo al centro dell'elemento genitori.

Come sto ancora imparando da solo, sto cercando di fare del mio meglio per aiutarti, buona fortuna. :)

Fonte: https://css-tricks.com/centering-percentage-widthheight-elements/

Answer 2

Questa soluzione funziona per me:

.slick-track { 
    display: flex; 
} 
.slick-track .slick-slide { 
    display: flex; 
    height: auto; 
    align-items: center; 
    justify-content: center; 
} 

vedi esempio qui:

https://codepen.io/leggomuhgreggo/pen/mEmzGN

Non