如何将flexbox项的内容垂直居中
如何将flexbox项的内容垂直居中
提问于 2015-02-01 01:20:49
在使用justify-content:stretch;时，我试图将flexbox项目的内容居中。在这种情况下，使用display:table-cell;vertical-align:middle;的老把戏似乎行不通。什么能做到？
.flex-container {
display:flex;
align-items:center;
justify-content:stretch;
}
.flex-item {
align-self:stretch;
}
<div class="flex-container">
<div class="flex-item">I want to be vertically centered! But I'm not.</div>
</div>在你回答之前：对于我的问题似乎有很多困惑。我正在尝试将flex-item的内容居中。使用justify-content:stretch，项目的高度将拉伸到容器的整个高度，但项目的内容会浮动到顶部(至少在Chrome中是这样)。
“一张图片胜过千言万语。”(A)是我已经得到的。(B)是我想要的。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-02-01 02:14:44
它可以通过将每个flex项作为flex容器进行display，然后通过align-items属性垂直对齐内容来实现，如下所示：
.flex-container {
display:flex;
align-items:center;
height: 200px; /* for demo */
}
.flex-item {
align-self:stretch;
display:flex;
align-items:center;
background-color: gold; /* for demo */
}<div class="flex-container">
<div class="flex-item">
I want to be vertically centered!
<s>But I'm not.</s>
</div>
</div>
注意，如果省略了.flex-container的align-items:center;声明，也可以安全地从flex项中删除align-self:stretch;。
Stack Overflow用户
发布于 2015-02-01 02:16:22
我不确定我是否正确地解释了您的请求，但我认为您正在尝试使用"justify-content:stretch;“，而您应该使用flex-grow。
在我的示例中，我使用了flex :1auto；它只是设置几个flex属性的简写。
HTML：
<div class="flex-container">
<div class="flex-item">I'm top dog!
</div>
<div class="flex-item flex-center">
I want to be vertically centered! And I am!
</div>
</div>CSS：
*{
box-sizing:border-box;
padding:5px;
}
.flex-container {
border: 1px solid;
display:flex;
align-items:center;
height: 100px;
}
.flex-item {
flex: 1 auto;
border: 1px solid green;
height:100%;
display:flex;
justify-content:center;
}
.flex-center {
align-items: center;
}Flex属性：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28254332
复制相关文章
相似问题