我需要将一个div放在flex容器中心,并保持整个容器的高度为div.显然,我有align-items:stretch保持高度或align-items:center居中区块.Flexbox模型以保持父容器高度为中心div的好方法是什么？

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

你可以换行文本节点与span元素,然后设置display的.child2要flex添加align-self: center到孩子span的垂直居中元素.

更新的示例

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

    

        
Text
    
    

        should be centered vertically