（轉）垂直居中

1、利用 position 和負邊距 
利用絕對定位，讓元素的頂部與居中線對齊，再讓元素上移 50% 的高度。這個應該不難理解。原理能夠用下圖來作一個可視化說明： 

 

代碼以下:

/* 代碼實現： 
* 設定寬度和高度，父節點爲 position:relative; CSS是這樣寫的: 
*/ 
.selector { 
    position:absolute;top:50%;。 
    margin-top:-元素自身高度的一半; 
} 

 

 

2、使用 <table /> 
<table /> 真是各類好用，她是各類佈局、居中的法寶。垂直居中對其來講，也是很是簡單的事。table cells 的 vertical-align:middle 就能夠直接解決。因此實現起也來只要這樣一行代碼： 
td{ vertical-align:middle; }3、通用解決方案 
使用第一方案的問題是，一般咱們須要垂直居中的元素高度都是不確實的。這裏咱們須要用 JS 來實現高度的計算，再實現負邊；而第二種方案的侷限在於只應用於 <table />。實際上是，咱們可能綜合這兩種方法，來作一個 Hack。 
像咱們知道的，在 CSS2.1 中，任何元素均可以使用 display:table / display:table-cell來實現與 table 同樣的功能。那麼，只要支持 display:table 的瀏覽器，已經能夠輕鬆解決，只要這樣寫代碼：

 

代碼以下:

<!-- DOM 結構 --> 
<div> 
<p>content</p> 
</div> 
/* CSS 實現 */ 
div { 

    display:table; 

} 
p{ 

    display:table-cell; 

    vertical-align:middle; 

}

 

但問題是，這種方法在 IE6/7 是不能實現的，由於他們不支持 display:table 這個特性。那有沒有辦法不計算高度，利用第一種方案來實現垂直居中呢？其實也何嘗不可。看看下面這個 DOM 結構和圖示： 

 

代碼以下:

<div class="wrap"> 
<div class="hack"> 
<div class="cnt"> 
content 
</div> 
</div> 
</div> 

 

 

 

其實咱們只要加多一層。內 .hack 層 top:50%; 再讓 .cnt 層相對自身向上提50%。如上圖所示。這裏有一個 DEMO: 
垂直居中最終方案: DEMO http://demo.jb51.net/js/2011/align-middle/ 

 

代碼以下:

/* CSS 部分的代碼實現：總體代碼參見上述 demo*/ 
.wrap{ 
    width:500px;

    height:300px;

    border:3px solid #ddd;

    margin:0 auto;

    padding:20px;

    display:table; 
    position:relative; 
} 
.hack{ 
    display:table-cell;

    vertical-align:middle; 
    position:absolute;

    top:50%; 
} 
.cnt{ 
    position:relative;

    top:-50%; 
}

這是在支付寶通用解決方案中實現的一個方案。=_,= 歡迎提供更好的方案…