在另一個流體div中垂直對齊流體div

Question

如果子div的寬度固定，我已經看到了很多解決方案，但如果流體寬度可變，則沒有。

父div的高度應固定為150px，流體寬度應為80％。

子div的流體高度（隨內容擴展）和流體寬度（始終為100％）。

我想讓子div在父div內垂直對齊。 子div中的所有內容也應水平居中。

這是我現在所擁有的：

http://jsfiddle.net/6986r/

<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已經建議的table屬性）

請注意， display:table可用作舊版瀏覽器的后備

演示

---

CSS的基本更新：

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

Answer 2

最靈活的實現可能是利用display:table ，但是您還需要稍微調整HTML並添加一個附加的父級：

演示小提琴

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