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

Posted 2023-03-06

【中文标题】当高度未知时使用 flexbox 垂直居中时出现问题

【英文标题】：Issue when centering vertically with flexbox when heights are unknown

【发布时间】：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

方案：

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

【参考方案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 - 这里有一些关于“为什么？”的细节...***.com/a/33455342/3597276

【参考方案2】：

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

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

【讨论】：

这回答了问题，而不是像接受的答案那样提供解决方法。 +1

您的解决方案只是忽略居中要求。当然，如果不需要居中，就不会有问题..

这不是正确答案，因为它忽略了垂直居中。所以这不是一个解决方案。

【参考方案3】：

不要使用justify-content: center 或align-items: center。要实现居中对齐，只需将空元素放在两边，并将空元素设置为flex: 1，这样它们就会将居中元素推到中心。