css-實現元素/元素內容，垂直居中對齊
一、單行內容的垂直居中（line-height：行高方法）
只考慮單行是最簡單的，無論是否給容器固定高度，只要給容器設置 line-height 和 height，並使兩值相等，就可以了。
缺點：1：這種方法局限性太大，只有單行文本的元素才適用，所以在多行元素中是不能使用這種方法的了。
2 ：IE中不支持<img>等的居中。
優點：適合在所有浏覽器，沒有足夠空間時，內容不會被切掉，同時支持塊級和內聯元素
但是這種方法對運用在小元素上是非常有用的，比如說讓一個button、或者單行文本字段。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style>
.middle-demo-1{
background-color:#f1f1f1;
height: 30px;
line-height: 30px;
}
</style>
</head>
<body>
<div class="middle-demo-1">
css實現元素
</div>
</body>
</html>
二、多行內容垂直居中，且容器高度可變：（padding:內邊距方法）
也很簡單，給出一致的 padding-bottom 和 padding-top 就行
優點：
1. 同時支持塊級和內聯極元素
2. 支持非文本內容
3. 支持所有浏覽器
缺點：容器不能固定高度
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style>
.middle-demo-1{
padding-top: 24px;
padding-bottom: 24px;
}
</style>
</head>
<body>
<div class="middle-demo-2">
css實現元素
</div>
</body>
</html>
三、把容器當作表格單元
CSS 提供一系列diplay屬性值，包括 display: table, display: table-row, display: table-cell 等，能把元素當作表格單元來顯示。
這是再加上 vertical-align: middle, 就和表格中的 valign="center" 一樣了。
缺點：IE低版本不支持這些屬性。如果需要兼容ie6,7，需要使用Hack
要注意的是：和一個合法的<td>元素必須在<table>裡一樣，display: table-cell 元素必須作為 display: table 的元素的子孫出現。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style>
.middle-demo-3{
display: table-cell;
height: 100px;
vertical-align: middle;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<div class="middle-demo-3">
css實現元素
</div>
</body>
</html>
四、已知寬高塊元素的水平垂直居中
絕對定位50%，margin負值
缺點：由於固定死元素的高度，致使沒有足哆的空間，當內容超過容器的大小時，要麼會消息，要麼會出現滾動條（如果元素在body內，當用戶縮小浏覽器窗口時，body的滾動條將不會出現）。
注意：其一元素定位關系到一個相對定位參考，所以要保證元素是相對於哪個為參考坐標；
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style>
.middle-demo-4{
background-color: red;
width: 200px;/*元素的寬度*/
height:200px;/*元素的高度*/
position: absolute;
left: 50%;/*配合margin-left的負值實現水平居中*/
margin-left: -100px;/*值的大小等於元素寬度的一半*/
top:50%;/*配合margin-top的負值實現垂直居中*/
margin-top: -100px;/*值的大小等於元素高度的一半*/
}
</style>
</head>
<body>
<div class="middle-demo-4">css元素本身水平垂直居中對齊，而不是其元素內容，主意區分</div>
</body>
</html>
五：全兼容的水平垂直居中實例（原文：http://hovertree.com/hvtart/bjae/j895d0wj.htm），
1:vertical-align 只應用於inline level, inline-block level 及 table-cells 元素上；其次 vertical-align 的對齊就基於每個 line box（行框）的。
簡單的說，inline level元素按照 Normal flow 水平排版出一行就會形成一個line box，其高度由內容形成，如果換行，則又是另一個line box，所有一段文本可能會分布在多個line box裡，這些不重疊的line box被稱作為a vertical stack of line boxes（一個垂直堆疊的線框集合）這些。
2: 換句話說，我們的垂直居中是要在每個line box中進行處理。
而上例中我們想讓一行文本在名叫demo的高100px的容器裡垂直居中，這時有個問題就是demo容器並非 該行文本的line box，所以就算定
vertical-laign為middle也無法讓該行文本在demo容器中垂直居中。
我們知道line box的高度是由內容形成的，這時我們可以額外創建一個與該行文本處於同一line box的元素，同時將新增元素的高度定義為與demo容器相同，此時line box的高度將與demo一致，文本將會在line box內垂直居中 即同樣實現了在demo容器中垂直居中。本例我們使用偽對象::after來創建那個新增元素，可以設置新增元 素為不可見。
3:由於IE8以下浏覽器不支持偽對象::after，於是我們通過IE條件注釋為IE8以下浏覽器新增一個額外元素span，其作用等同 inline-block #5 中的::after。本例支持所有主浏覽器。
4:由於ie6,7下不支持display:inline-block,
IE6 中 inline 元素只要觸發了 hasLayout 其表現就類似於 inline-block，這裡設置 display:inline-block; 或者 zoom:1; 等其他屬性值可以觸發 hasLayout ，
表現出來是一樣的。
5:display:inline-block 後的元素會產生水平空隙 font-size:0:解決間隙問題
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style>
#demo{
height:100px;
text-align:center;
font-size:0;/*去除 inline-block 空隙*/
background-color: red;
}
#demo:after,#demo span{
display:inline-block;
*display:inline;/*inline-block 兼容ie6,7*/
*zoom:1;/*inline-block 兼容ie6,7*/
width:0;
height:100%;
vertical-align:middle;
}
#demo:after{
content:'';
}
#demo p{
display:inline-block;
*display:inline;/*inline-block 兼容ie6,7*/
*zoom:1;/*inline-block 兼容ie6,7*/
vertical-a