Html 如何垂直居中 flexbox 项目的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28254332/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to vertically center the contents of a flexbox item
提问by emersonthis
I'm trying to center the CONTENTS of a flexbox item while using justify-content:stretch;It appears that the old trick of using display:table-cell;vertical-align:middle;doesn't work in this situation. What does?
我试图在使用时将 flexbox 项目的内容居中justify-content:stretch;看来旧的使用技巧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>
BEFORE YOU ANSWER:There seems to be a lot confusion about what I'm asking. I'm trying to center the CONTENTSof the flex-item. With justify-content:stretch, the height of the item will stretch to the full height of the container, but the contentsof the item floats to the top (at least in Chrome).
在你回答之前：我问的问题似乎有很多困惑。我试图将 flex-item的内容居中。使用justify-content:stretch，项目的高度将拉伸到容器的整个高度，但项目的内容浮动到顶部（至少在 Chrome 中）。
"A picture is worth a thousand words." (A) is what I've already got. (B) is what I want.
“一张图片胜过千言万语。” (A) 是我已经得到的。(B) 是我想要的。
回答by Hashem Qolami
It can be achieved by displaying each flex item as a flexcontainer and then aligning the contents vertically by align-itemsproperty, as follows:
可以display通过将每个 flex item 作为一个flex容器，然后通过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>As a side-note, if you omit the align-items:center;declaration of the .flex-containeryou can safely remove align-self:stretch;from flex items as well.
作为旁注，如果您省略了 的align-items:center;声明，.flex-container您也可以安全地align-self:stretch;从 flex 项目中删除。
回答by chris
I'm not sure if I am interpreting your request correctly, but I think you are trying to use "justify-content:stretch;" when you should be using flex-grow.
我不确定我是否正确解释了您的请求，但我认为您正在尝试使用“justify-content:stretch;” 什么时候应该使用 flex-grow。
Im my sample I used flex:1 auto; which is just shorthand to set a couple of flex properties.
我的示例我使用了 flex:1 auto; 这只是设置几个 flex 属性的简写。
HTML:
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:
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 property:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
Flex 属性：https:
//developer.mozilla.org/en-US/docs/Web/CSS/flex
