在空间填充弹性框内垂直居中内容

Question

我正在尝试将内容垂直居中在列布局中的两个弹性框中.

我已经创建了一个简化的小提琴来演示.

HTML:

<div id='container'>
    <div id= "top">
        some content!
    </div>
    <div id= "bottom">
        some content!
    </div>
</div>

CSS:

#container{
    display: -webkit-flex;
    width:100%;
    height:300px;
    -webkit-flex-direction: column;
    -webkit-justify-content: space-around;
    background-color: gray;
}
#container div{
    text-align:center;
    background-color:red;
    //-webkit-flex: 1; //uncomment to see 2nd option
    //vertical-align: middle; //doesn't work
}

我希望内部DIV垂直拉伸以填充剩余空间.我可以通过取消注释flex值来做到这一点,但是当我这样做时,内容与顶部对齐.我尝试了纵向对齐,但这不起作用(我没想到它!)......

因为我的应用程序有一个动态高度的容器,我不能使用固定的边距或填充来排序这个问题.

有没有办法做到这一点？也许我必须让内部div本身是flex容器,但这看起来有点乱.

Answer 1

你在这里没有太多选择.vertical-align属性仅适用于内联或表格单元格元素.你真的只是添加了一个额外的属性,并且已经改变了你已经拥有的两个属性.

http://jsfiddle.net/bHNC9/1/

#container{
    display: -webkit-flex;
    width:100%;
    height:300px;
    -webkit-flex-direction: column;
    background-color: gray;
}
#container div{
    text-align:center;
    background-color:red;
    -webkit-flex: 1;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
}