元素居中分為垂直居中、水平居中、水平和垂直都居中，這裡主要介紹幾種常見的使元素水平、垂直都居中的方法。
方法一：負margin
1.將待居中元素box設定為絕對定位，left:50%，top:50%；
2.利用負margin值調整到居中，margin-left取負的box寬度的一半，margin-top取負的box高度的一半；
缺點：需要提前知道待居中元素的size。
container：寬500px，高100px；box：寬200px，高80px。
demo戳這裡：負margin居中
方法二：負margin+transform
基本原理同方法一，只是使用了css3中的transform屬性，它取值為translate（-50%,-50%），表示box在x軸、y軸方向上向原點分別平移box元素寬和高的一半。
1.將待居中元素box設定為絕對定位，left:50%，top:50%；
2.transform：translate（50%，50%）；
優點：不必提前知道待居中元素的大小。
demo戳這裡：transform居中
方法三：絕對定位居中
1.將元素絕對定位，四個方向定位都取0
2.margin取值為auto。
demo戳這裡：絕對定位居中
方法四：viewport居中
這個方法是針對整個viewport居中的
1.將元素的position取fixed，四個方向定位都取0；
2.margin取值為auto。
demo戳這裡：viewport居中
inline block實現元素水平居中
僅inline block屬性是無法讓元素水平居中，他的關鍵之處要在元素的父容器中設定text align的屬性為 center lang en charset utf 8 documenttitle type text css ul ulli style head item1li item2li ...
CSS實現元素水平居中
元素主要分為塊級元素和行內元素，所以對元素進行水平居中也分這兩種情況來討論，另外塊級元素的實現比較複雜，將分情況討論。常用行內元素為a img input span等，標籤內的html文字也屬於此類。對於此類情況，水平居中是通過給父元素設定text align center來實現的。html結構 h...
CSS實現元素垂直居中
對元素的垂直居中針對於單行元素和多行元素將分情況討論。父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的 height 和 line height 高度一致來實現的。html結構 hello world css樣式 對於父元素高度不確定的文字 等的塊級元素的豎直居中可以設定相同的上下內邊距 ...