css實現垂直水平居中的方法多種，各種方法各有優劣，查閱網上資料，自己總結于此，方便日后應用。
1. 絕對定位居中
.box {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
overflow: auto;
width: 50%;
height: 50%;
margin: auto;
}
優點：
- 支持跨瀏覽器，包括IE8-IE10.
- 無需其他特殊標記，CSS代碼量少
- 支持百分比%屬性值和min-/max-屬性
- 只用這一個類可實現任何內容塊居中
- 不論是否設置padding都可居中（在不使用box-sizing屬性的前提下）
- 內容塊可以被重繪
- 完美支持圖片居中
缺點：
- 必須聲明高度
- 建議設置overflow:auto來防止內容越界溢出
- 在Windows Phone設備上不起作用
2.負外邊距居中
塊元素尺寸已知，外邊距margin取負數，大小為width/height（不使用box-sizing: border-box時包括padding）的一半，再加上top: 50%; left: 50%;
.box{
position: absolute;
top: 50%; left: 50%;
width: 200px;
height: 200px;
padding: 60px;
margin-left: -130px;
margin-top: -130px;
}
優點：
- 兼容IE6，7
缺點：
- 不能自適應。不支持百分比尺寸和min-/max-屬性設置。
- 內容可能溢出容器。
- 邊距大小與padding,和是否定義box-sizing: border-box有關，計算需要根- 據不同情況。
3. Transforms居中
.box{
position: absolute;
top: 50%; left: 50%;
width: 50%;
margin: 0 auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
優點：
- 內容可變高度
缺點：
IE8不支持
屬性需要寫瀏覽器廠商前綴
可能干擾其他transform效果
某些情形下會出現文本或元素邊界渲染模糊的現象
4. Table-Cell居中
HTML
<div class="container">
<div class="box">
<div class="centent">
</div>
</div>
</div>
CSS
.container {
display: table;
width: 500px;
height: 500px;
}
.box {
display: table-cell;
vertical-align: middle;
}
.centent {
width: 50%;
margin: 0 auto;
}
優點：
- 高度可變
- 內容溢出會將父元素撐開
- 跨瀏覽器兼容性好
缺點：
- 需要額外html標記
5. Flex居中
.container {
display: flex;
flex-direction: column; /* 改變排列方向 */
justify-content: center;
align-items: center;
}
優點：
- 內容塊的寬高任意，優雅的溢出
- 可用于更復雜高級的布局技術中
缺點：
- IE8/IE9不支持。
- Body需要特定的容器和CSS樣式。
- 運行于現代瀏覽器上的代碼需要瀏覽器廠商前綴。
- 表現上可能會有一些問題
