光滑的滑块在弹性容器中不起作用

Question

我正在尝试将一个光滑的轮播（http://kenwheeler.github.io/slick/）垂直居中在一列中。所以我在列（光滑滑块的容器）上使用

display: flex; align-items: center;

，但它破坏了滑块。

所以我尝试使用绝对位置或使用 Flexbox 将轮播居中，但它们都会破坏光滑的滑块。

我希望有人能找到解决这个问题的 css/js/jquery 解决方案:)

这里是问题的小提琴：https://jsfiddle.net/victor_allegret/g3dsd78w/

（抱歉，我在向堆栈溢出片段添加 slick 时遇到问题）

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

像这样？ 具有绝对位置。

.abs-container {
  position:absolute;

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

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

还有 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'>
      .
      .
      .

Answer 2

最近遇到这个问题。为我添加

min-width: 0;

到父元素。

.flex-container {
    display: flex;
    ...
    min-width: 0;
}

截至此 github 讨论。