我需要将一个 div 放在 Flex 容器中，并保持该 div 的整个容器的高度。显然，我有align-items:stretch用于保持高度或align-items:center用于定心块。 Flexbox 模型将 div 居中并保持父容器高度的好方法是什么？
JSFiddle：http://jsfiddle.net/symb8s02/ http://jsfiddle.net/symb8s02/
你可以用一个包裹文本节点span元素，然后设置display of .child2 to flex并添加align-self: center给孩子span垂直居中的元素。
更新的示例 http://jsfiddle.net/qrkzw8jb/
.child2 {
border-left: 1px black solid;
align-self: stretch;
display: flex;
}
.child2 > span {
align-self: center;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
background-color: yellow;
}
.child1 {
background-color: green;
}
.child2 {
border-left: 1px black solid;
align-self: stretch;
display: flex;
}
.child2 > span {
align-self: center;
}
<div class="container">
<div class="child1">
<h1>Text</h1>
</div>
<div class="child2">
<span>should be centered vertically</span>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
