フレックスコンテナで滑りにくいスライダが動作しない

Question

滑らかなカルーセル（http://kenwheeler.github.io/slick/）を縦にセンタリングしようとしています。だから私はdisplay: flex; align-items: center;（滑らかなスライダのコンテナ）列に使用しますが、スライダが壊れます。

私は絶対位置で、またはフレックスボックスを使用してカルーセルの中心を合わせようとしましたが、どちらも滑らかなスライダを壊します。

は、私は誰かがこの問題:)ここ

問題のフィドルのCSS/JS/jQueryのソリューションを持って願っています：https://jsfiddle.net/victor_allegret/g3dsd78w/

（申し訳ありませんが、私は、スタックオーバーフローのスニペットにスリックを追加する問題を持っています）

HTML：

<div class='flex-container'> 

<div class='single-item'> 

    <div><h3>1</h3></div> 
    <div><h3>2</h3></div> 
    <div><h3>3</h3></div> 
    <div><h3>4</h3></div> 
    <div><h3>5</h3></div> 
    <div><h3>6</h3></div> 

</div> 

</div> 

CSS：の

.flex-container { 
/* Using flexbox */ 
display: flex; 
align-items: center; 
/*----*/ 
margin: 0 auto; 
padding: 40px; 
height: 500px; 
width: 80%; 
color: #333; 
background: #419be0; 
} 

.slick-slide { 
text-align: center; 
color: #419be0; 
background: white; 
} 

JS：このように

$(".single-item").slick({ 
dots: true 
}); 

Answer 1

？ With absolute position.

.abs-container { 
    position:absolute; 

    height:140px; 
    width:300px; 
    top:50%; 
    left:50%; 
    margin:-70px 0 0 -150px; 

    color: #333; 
    background: #419be0; 
} 

And this with FlexBox.

.flex-container { 
    position:absolute; 
    top:0px; 
    bottom:0px; 
    width:100%; 
    height:100%; 

    /* Using flexbox */ 
    display: flex; 
    flex-direction: row; 
    flex-wrap: nowrap; 
    justify-content: center; 
    align-content: stretch; 
    align-items: center; 
    /*----*/ 

    color: #333; 
    background: #419be0; 
} 
.flex-child { 
    width: 300px; 
    order: 0; 
    flex: 0 1 auto; 
    align-self: center; 
} 

HTMLが

<div class='flex-container'> 
    <div class='flex-child'> 
     <div class='single-item'> 
     . 
     . 
     .