css - 在具有拉伸(stretch)对齐的 flexbox 容器中垂直居中 div

Question

我需要将 flex 容器中的一个 div 居中，同时保持该 div 的整个容器的高度。显然，我有 align-items:stretch 用于保持高度或 align-items:center 用于居中 block 。 flexbox 模型在保持父容器高度的情况下使 div 居中的好方法是什么？

JSFiddle:http://jsfiddle.net/symb8s02/

Answer 1

您可以用 span 元素包裹文本节点，然后将 .child2 的 display 设置为 flex 并将 align-self: center 添加到子 span 元素以实现垂直居中。

Updated Example

.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>