Question

如果儿童div具有固定的宽度，我已经看到了很多解决方案，但是如果它是流动的则没有。

父div应具有固定高度（150px）和流体宽度（80％）。

子div应具有流体高度（随内容扩展）和流体宽度（始终为100％）。

我想让子div在父div中垂直对齐。子div中的所有内容也应该水平居中。

这就是我现在所拥有的：

<div class="s1">
<div class="centereddiv">This green div should be vertically centered.</div>
</div>

-

body, html {
height: 100%;
margin: 0;
}
.s1 {
width:100%;
height: 150px;
display: block;
background-color: red;
float: left;
}
.centereddiv {
color: black;
text-align: center;
background-color: green;
}

Answer 1

如果您不介意旧浏览器，可以使用display:flex属性（除了@ SW4已经提出的表属性）

请注意， display:table可用作旧版浏览器的 fall back

<强> DEMO

CSS的基本更新：

.parent {
    display:flex;
}
.childcentereddiv {
    margin:auto;
}

Answer 2

最灵活的实现可能是利用display:table，但是您还需要稍微调整HTML并添加其他父级：

Demo Fiddle

<div class="table">
    <div class="cell">
        <div class="childcentereddiv">This green div should be vertically centered.</div>
    </div>
</div>

CSS

body, html {
    height: 100%;
    margin: 0;
    width:100%;
    padding:0;
}
.table {
    height: 150px;
    background-color: red;
    display:table;
    width:80%;
}
.cell {
    display:table-cell;
    vertical-align:middle;
}
.childcentereddiv {
    color: black;
    text-align: center;
    background-color: green;
}

垂直对齐另一个流体div内的流体div

2 个答案:

Demo Fiddle