在flexbox容器中垂直居中div，具有拉伸对齐

Question

我需要在flex容器中居中一个div，并保持该div的整个容器的高度。显然，我有align-items:stretch用于保持高度或align-items:center用于居中区块。什么是一个很好的方法，使flexbox模型以div为中心保持父容器的高度？

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

Answer 1

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

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>