与Flexbox的垂直居中问题时，当高度未知与Flexbox的垂直居中问题时，当高度未知(Issue

我的布局有一个容器， flex-container和一个孩子。

HTML：

<div class="flex-container">
  <div>text</div>
</div>

容器和孩子有一个未知的高度 。其目标是：

如果孩子有比该容器中的较低的高度，它的出现在水平和垂直方向上居中。
如果孩子有比容器更高的高度，它调整到顶部和底部，我们可以做滚动。

方案：

定心与Flexbox的一个元素最快的方法是如下：

 .flex-container { display: flex; align-items: center; /* vertical */ justify-content: center; /* horizontal */ width: 100%; height: 300px; /* for example purposes */ overflow-y: scroll; background: #2a4; } .flex-container > div { background: #E77E23; width: 400px; }

 <div class="flex-container"> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div> </div>

Codepen： http://www.codepen.io/ces/pen/slicw

但是，如果容器的孩子有更大的高度，孩子无法正确显示。孩子出现板缺（仅顶部）。

 html,body { height: 100%; width: 100%; padding: 0; margin: 0; } .flex-container { display: flex; align-items: center; // vertical justify-content: center; // horizontal width: 100%; height: 100px; overflow-y: scroll; background: #2a4; } .flex-container > div { background: #E77E23; width: 400px; }

 <div class="flex-container"> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div> </div>

Codepen： http://www.codepen.io/ces/pen/sGtfK

方案：

是否有解决办法这个问题？

Answer 1:

我找到了解决办法：

.flex-container
{
  display: flex; /* only */
  overflow-y: scroll;
}

.flex-container > div
{
  margin: auto; /* horizontal and vertical align */
}

 html,body { height: 100%; width: 100%; padding: 0; margin: 0; } .flex-container { display: flex; width: 100%; height: 100px; /* change height to 300px */ overflow-y: scroll; background: #2a4; } .flex-container > div { padding: 1em 1.5em; margin: auto; background: #E77E23; width: 400px; }

 <div class="flex-container"> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div> </div>

Codepen： http://codepen.io/ces/pen/Idklh