当高度未知时使用 flexbox 垂直居中时出现问题答案

【问题标题】：Issue when centering vertically with flexbox when heights are unknown当高度未知时使用 flexbox 垂直居中时出现问题
【发布时间】：2014-08-23 15:45:18
【问题描述】：

我的布局有一个容器 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

方案：

有没有办法解决这个问题？

【问题讨论】：

标签： css flexbox height overflow

【解决方案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

【讨论】：

我希望我能多次对此表示赞同 - 它不仅有用，而且沟通得很好，谢谢。
这里.flex-container的初始值为align-items: flex-start（即top）。
很久以来一直在努力寻找答案！谢谢。
不错的解决方案，但有什么原因吗？
@jiyinyiyong - 这里有一些关于“为什么？”的细节...stackoverflow.com/a/33455342/3597276

【解决方案2】：

将align-self:flex-start;添加到.flex-container > div也可以解决这个问题。

见：http://www.w3.org/TR/css-flexbox-1/#auto-margins

【讨论】：

这回答了问题，而不是像接受的答案那样提供解决方法。 +1
您的解决方案只是忽略居中要求。当然，如果不需要居中，就不会有问题..
这不是正确答案，因为它忽略了垂直居中。所以这不是一个解决方案。