保持div父高度与子div内容水平居中

Question

所以我一直在寻找如何使父div的高度等于其最大的孩子的高度，同时使孩子们具有相同的最大高度并在所有孩子身上强制执行水平垂直中心，这可能包含图像。 简而言之，使用具有两列和一行的表的结果，其中align和valign设置为center。

对于以下html，

<div class="outer">
    <div class="inner">
        <div class="col1">
        </div>
        <div class="col2">
        </div>
    </div>
</div>

用于使所有子节点具有相同（最大）高度的css，以便在扩展父节点以包含且不隐藏其子数据时可以使每列内容居中...

最初我尝试使用它 ，但它没有正确地将每列扩展到最大高度，从而阻止了每个子项内容的所需垂直居中。

有些人还建议使用overflow: overlay; 或overflow:auto; css属性，但这到处产生滚动条。

任何帮助都会很棒......桌子看起来真的很好......

Answer 1

你试过display:inline-block; ？

.col1,.col2
{
    display:inline-block;
    vertical-align:middle;
    width:200px;
    border-style:solid;
}
.inner
{
    border-style:solid;
    text-align:center;
}
.col1
{
    height:300px;

}
.col2
{
    height:200px;
}

两列将彼此相邻， .inner的高度将由最高的列决定，在这种情况下， .col1 。 看看： DEMO