CSS垂直居中的方法 - chakson－IT工程師數位筆記本

文章出處

前端開發過程中，水平垂直居中是比較常用的。下面直接開門見山，看看不同方法實現垂直居中的各自優點和其不足之處。

1、將“line-height”和“height”設置成一致

這種方法用來實現單行垂直居中是相當的簡單的，也挺常用的。你只要保證元素內容是單行，并且其高度是固定不變的，你只要將其“line-height”設置成和“height”值一樣就Ok了。不過這種方法局限性太大，只有單行文本的元素才適用，所以在多行元素中是不能使用這種方法的。

<div class="vertical">content</div>

.vertical { 
height: 100px; 
line-height: 100px;/*值等于元素高度的值*/ 
}

優點：
適合在所有瀏覽器，沒有足夠空間時，內容不會被切掉。

缺點：
僅適合應用在文本和圖片上，并且這種方法，當你文本不是單行時，效果極差，差到讓你感到惡心。
這種方法對運用在小元素上是非常有用的，比如說一個button、圖片或者單行文本字段。

2、設置容器的絕對定位，根據top和margin-top的值實現

這種方法將在需要給容器設置絕對定位（position:absolute）,并且定位高度（top:50%）和margin-top為高度的一半（margin-top:-height/2）。這就意味著使用這種方法來實現垂直居中的效果，那么元素必須要有一個固定的高度。這樣一來，你給元素設置了固定高度，如果你又給他設置了“overflow:auto”，那么當元素內容超過容器后，這樣元素的就會出現滾動，而不會自適應內容的高度。

<div class="vertical">content</div>

.vertical { 
height: 100px;/*元素的高度*/ 
position: absolute; 
top: 50%;/*元素的頂部邊界離父元素的的位置是父元素高度的一半*/ 
margin-top: -50px;/*設置元素頂邊負邊距，大小為元素高度的一半*/ 
}

優點：
能在各瀏覽器下工作，結構簡單明了，不需增加額外的標簽

缺點：
由于固定死元素的高度，致使沒有足夠的空間，當內容超過容器的大小時，要么會消失，要么會出現滾動條（如果元素在body內，當用戶縮小瀏覽器窗口時，body的滾動條將不會出現）。

3、display設置為“table”和“table-cell”實現

使用的的div模擬表格效果，也就是說將多個<div>的“display”屬性設置為“table”和“table-cell”，并設置他們的“vertical-align”的屬性值為“middle”。

<div id="container">
    <div id="content">this is content</div>
</div>

#container { 
height: 300px; 
display: table;/*讓元素以表格形式渲染*/ 
} 
#content { 
display:table-cell;/*讓元素以表格的單元素格形式渲染*/ 
vertical-align: middle;/*使用元素的垂直對齊*/ 
}

優點：
這種方法不會像前面的兩種方法一樣，有高度的限制，此方法可以要據元素內容動態的改變高度，從而也就沒有空間的限制，元素的內容不會因為沒足夠的空間而被切斷或者出現難看的滾動條。

缺點：
不足之處呢？這種方法只適合現代瀏覽器，在IE6-7下無法正常運行；而且較前兩者而言，結構也更復雜。
這種方法在現代瀏覽器下是非常方便。但是在IE6-7中是不被支持的，因為display:table在IE6-7中不被支持，那么為了解決這種方法在IE6-7的兼容，需要額外增加一個div，并使用hack，其解決辦法。

<div class="table"> 
　　<div class="tableCell"> 
　　　　<div class="content">content</div> 
　　</div> 
</div>

.table { 
height: 300px;/*高度值不能少*/ 
width: 300px;/*寬度值不能少*/ 
display: table; 
position: relative; 
float:left; 
} 
.tableCell { 
display: table-cell; 
vertical-align: middle; 
text-align: center; 
padding: 10px; 
*position: absolute; 
*top: 50%; 
*left: 50%; 
} 
.content { 
*position:relative; 
*top: -50%; 
*left: -50%; 
}

4、采用的display:inline-block，然后借助另一個元素的高度來實現居中

這種方法是采用的display:inline-block，然后借助另一個元素的高度來實現居中

<div id="parent"> 
　　<div id="vertically_center"> 
　　　　<p>I am vertically centered!</p> 
　　</div> 
　　<div id="extra"><!-- ie comment --></div> 
</div> 


<style type="text/css"> 
html, 
body{ 
height: 100%; 
} 
#parent { 
height: 500px;/*定義高度，讓線盒型div#extra有一個參照物，可以是固定值，也可以是百分比*/ 
border: 1px solid red; 
} 
#vertically_center, 
#extra { 
display: inline-block;/*把元素轉為行內塊顯示*/ 
vertical-align: middle;/*垂直居中*/ 
} 
#extra { 
height: 100%; /*設置線盒型為父元素的100%高度*/ 
} 
</style> 
<!--[if lt IE 8]> 
<style type="text/css"> 
/*IE6-7不支持display:inline-block，所以在ie6-7另外寫一個hack，用來支持ie6-7*/ 
#vertically_center, 
#extra { 
display: inline; 
zoom: 1; 
} 
#extra { 
width: 1px; 
} 
</style> 
<![endif]-->

優點：
可以自適應高度，簡單易懂

缺點：
需要給元素的父元素設置一個高度，這個高度可以是一個固定值或者百分值高度，另外需要增加一個額外的標簽，當作線盒型，如div#extra，并且需要設置其高度為100%。另外就是ie6-7不支持display:inline-block，需要給他們另外寫一個樣式。

5、給出上下一樣的padding值

這個方法是針對多行內容居中，而且容器高度是可變的，方法很簡單，就是給出上下一樣的padding值。

<div class="columns"> 
    <div class="item">test</div> 
</div>

.item {padding-top:30px;padding-bottom:30px;}

優點：
在所有瀏覽器下能正常工作，支持所有元素，簡單易懂，結構清晰

缺點：
使用這種方法不能給容器固定高度，如果固定高度將無法達到效果。

6、父容器設置display: flex;

<div class="columns">
    <div class="item">content</div>
</div>

.columns{
display: flex;
-moz-box-pack: center;
justify-content: center;
-moz-box-align: center;
align-items: center;
height: 400px;
width: 400px;
}