css布局之塊上下左右居中

以下方案的通用代碼：
HTML code：

<div class="box">
    <div class="content">
        <!--content body-->
    </div>
</div>

CSS code：

.box{width:100%;height:500px;background-color: #00ff00;}
.content{width:300px;height:300px;background-color: #f0f000;}  

1.position top:50%;left:50%+margin-top: -1/2height;margin-left: -1/2width;

CSS樣式：

 .box{position: relative;}
 .content{position: absolute;top:50%;left:50%;margin-top: -150px;margin-left: -150px;}

原理：

內容塊以盒子為參考做絕對定位，通過top:50%;left:50%;使內容塊的左上角處於box的中心位置；
通過設置內容塊的margin值margin-top: -150px;margin-left: -150px;,使其中心位置和box的中心位置重合，達到居中效果；

兼容：

兼容所有瀏覽器，包括IE6及以上；

2.position top:0;bottom:0;left:0;right:0;+margin: auto;

CSS樣式：

.box{position: relative;}
.content{position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;}

原理：

內容塊以盒子為參考做絕對定位，通過top:0;left:0;bottom:0;right:0;使內容塊撐開為box大小；
設置寬高后，重新渲染內容塊大小填充不了整個box，默認位於左上角，通過設置``margin:auto;`使內容塊實現上下左右居中；
在文檔流中，margin:auto;會被認為是margin-top:0;margin-bottom:0;而絕對定位使塊脫離文檔流，margin:auto;能讓塊在top:0;left:0;bottom:0;right:0;組成的邊界中垂直居中；
margin:auto;在絕對定位中才能實現垂直居中；

兼容：

IE8以下不支持

3.display: table-cell;vertical-align:middle+margin：0 auto;

CSS樣式：

.box{display: table-cell;vertical-align:middle;}
.content{margin:0 auto;}  

原理：

table-cell可以將塊設置成表格單元格形式，此時設置vertical-align:middle;將基線設置為單元格中間，故可實現垂直居中；
margin:0 auto;使內容塊實現水平居中；

兼容：

IE6和7不兼容table-cell

4.inline-block+ vertical-align:middle;

CSS樣式：

.box{text-align:center;}
.box:after{content:'';height:100%;display:inline-block;vertical-align:middle;}
.content{display:inline-block;vertical-align:middle;margin-left:-0.25em;}

原理：

vertical-align用於設置垂直對齊方式，定義行內元素的基線相對於元素所在行基線的垂直對其方式。假設有兩個行內元素a和 b，a和b都是img，當a加了一個vertical-align:middle樣式之后，b的底部（基線）就會對齊a的中間位置。
text-align使行內塊居中顯示，after偽類設置成行內塊，並且設高度為100%，vertical-align:middle;以后將基線設置成box的中間線，相當於display:table-cell;
由於行內塊默認有左右margin值，導致內容塊與居中有偏差，故設一個左外邊距為負值margin-left:-0.25em;

兼容：

IE6和7不支持inline-block