在高度未知的情况下使用flexbox垂直居中时出现的问题

68

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

HTML：

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

容器和孩子的身高未知。目标是：

  • 如果孩子的身高低于容器，则其水平和垂直居中。
  • 如果孩子的身高比容器大，则它会调整到顶部和底部，我们可以滚动。

方案： 在此处输入图片说明

使用flexbox将元素居中的最快方法是：

显示代码段

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

但是，如果容器的子级具有更高的高度，则该子级将无法正确显示。子项显示为割伤（仅顶部）。

显示代码段

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

方案：

在此处输入图片说明

有解决此问题的方法吗？

css  flexbox  height  overflow 
— 塞斯彭
source

Answers:

138

我找到了解决方案：

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

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

显示代码段

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

— 塞斯彭
source
11
我希望我可以不止一次投票-不仅有用，而且沟通也很好，谢谢。
这里.flex-container具有初始值align-items: flex-start（即top）。
— 萨姆
1
很久以来一直在努力寻找答案！谢谢。
— ct5845
好的解决方案，但是为什么呢？
— jiyinyiyong 2015年
3
@jiyinyiyong-以下是有关“为什么”的一些详细信息 ... stackoverflow.com/a/33455342/3597276
— Michael Benjamin
-1

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

请参阅：http：//www.w3.org/TR/css-flexbox-1/#auto-margins

— 伊维格
source
1
这可以回答问题，而不是像接受的答案那样提供解决方法。1
— RienNeVaPlu͢s
8
您的解决方案就是忽略居中要求。当然，如果中心没有必要，也不会是一个问题..
— 迈克尔·本杰明
3
这不是正确的答案，因为它忽略了垂直居中。因此，这不是解决方案。
— ranzwertig
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.