高度未知时使用flexbox垂直居中时的问题
高度未知时使用flexbox垂直居中时的问题
提问于 2014-07-03 02:07:50
我的布局有一个容器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
方案：
有没有办法解决这个问题？
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-07-03 10:11:14
我找到了解决方案：
.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
Stack Overflow用户
发布于 2021-12-31 14:59:19
不要使用justify-content: center或align-items: center。要实现中心对齐，只需将空元素放在两侧，并将空元素设置为flex: 1，这样它们就可以将中心元素推到中心。
Stack Overflow用户
发布于 2015-10-28 23:43:22
在.flex-container > div中添加align-self:flex-start;也可以解决这个问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24538100
复制相关文章
相似问题
腾讯云开发者
