如何在流體佈局中垂直居中子div內的父div內容

Question

我有一個包含兩個子div的div，它們打算成爲流體佈局的一部分，所以我無法爲它們設置固定大小在px。

這裏有兩個目標：

1. 水平對齊兩個孩子div的，我已經分別使用float: left和float: right實現。

2. 垂直居中文本（在子div內）相對於父div。文字很短並且按設計採用單行。

我現在擁有的一切：http://jsfiddle.net/yX3p9/

顯然，這兩個孩子的div不帶父div的全高度，因此，他們的文本不垂直相對於父DIV居中。

從概念上講，要實現上述目標，我們可以讓子div在父div內垂直居中，或者我們可以讓子div取得父div的全部高度。強大的方法是什麼？

*瀏覽器支持：IE 9+和其他常見的現代瀏覽器。

Answer 1

我更新了你的提琴：http://jsfiddle.net/yX3p9/7/

我爲了使用vertical-align: middle;

Answer 2

使用line-height。如果它只是一行文本，高行高將有效地將文本定位在行中。

或嘗試display:table-cell結合vertical-align。

Answer 3

除了使用CSS表格使用display: table-cell;，你也可以用絕對定位來獲得類似的佈局。

使用你的HTML作爲是（沒有多餘的元素），應用下面的CSS：

html, body { 
    height: 100%; 
    width: 100%; 
    font-size: 13px; 
} 
.parent { 
    background-color: grey; 
    height: 20%; 
    line-height: 1.6em; 
    font-size: 1.6em; 
    min-height: 1.6em; 
    position: relative; 
} 
.left, .right { 
    position: absolute; 
    top: 50%; 
    margin-top: -0.8em; 
} 
.left { 
    background-color: yellow; 
    padding-left: 20px; 
    left: 0; 
} 
.right { 
    background-color: red; 
    padding-right: 20px; 
    right: 0; 
} 

你可以看到在演示小提琴：http://jsfiddle.net/audetwebdesign/cByHa/

在.parent容器，設置行高以明確的值（1.6em作爲字體大小），position: relative和min-height來爲文本保持足夠的高度。

兩個子元素.left和.right與top: 50% 絕對定位和使用margin-top: -0.8em得到垂直居中（使用的line-height值的一半）。

根據需要使用左右偏移（或填充）來調整子元素的水平位置。

Answer 4

html, body { 
    height: 100%; 
    width: 100%; 
    font-size: 13px; 
} 

.parent { 
    height: 50px; 
    background-color: grey; 
    font-size: 1.6em; 
} 

.left { 
    margin-left: 2%; 
    float: left; 
    background-color: yellow; 
    height:100%; 
} 

.right { 
    margin-right: 2%; 
    float: right; 
    background-color: red; 
    height:100%;  
} 
.parent span{ 
    display:table; 
    height:100%; 
} 
.parent em{ 
    display:table-cell; 
    vertical-align:middle; 

} 

http://jsfiddle.net/yX3p9/13/

Answer 5

我喜歡變換上述回答上面的使用。

top: 50%; 
transform: translateY(-50%); 
-ms-transform: translateY(-50%); 
-moz-transform: translateY(-50%); 
-webkit-transform: translateY(-50%); 
-o-transform: translateY(-50%); 

在我的經驗，它工作在很多情況下，並在所有主要的瀏覽器（甚至IE9 +）。

如果使用SCSS，你甚至可能要執行這項混入：

@mixin v-align($position: absolute){ 
    position: $position; top: 50%; 
    transform: translateY(-50%); 
    -ms-transform:translateY(-50%); /* IE */ 
    -moz-transform:translateY(-50%); /* Firefox */ 
    -webkit-transform:translateY(-50%); /* Safari and Chrome */ 
    -o-transform:translateY(-50%); 
}