為了實現上面的效果先來做些準備工作，假設html**如下，總共兩個元素，父元素和子元素
123123
wp是父元素的類名，box是子元素的類名，因為有定寬和不定寬的區別，size用來表示指定寬度，下面是所有效果都要用到的公共**，主要是設定顏色和寬高
注意：後面不在重複這段公共**，只會給出相應提示
/*公共**
*/.wp
.box
.box.size
/*公共**
*/
絕對定位的百分比是相對于父元素的寬高，通過這個特性可以讓子元素的居中顯示，但絕對定位是基於子元素的左上角，期望的效果是子元素的中心居中顯示
為了修正這個問題，可以借助外邊距的負值，負的外邊距可以讓元素向相反方向定位，通過指定子元素的外邊距為子元素寬度一半的負值，就可以讓子元素居中了，css**如下：
/*此處引用上面的公共**
*//*
此處引用上面的公共**
*//*
定位**
*/.wp
.box
這種方式也要求居中元素的寬高必須固定，html**如下
123123
這種方式通過設定各個方向的距離都是0，此時再將margin設為auto，就可以在各個方向上居中了。
/*此處引用上面的公共**
*//*
此處引用上面的公共**
*//*
定位**
*/.wp
.box
這種方法相容性也很好，缺點是子元素需要定寬高，不然的話會跟隨父元素的寬高
123123
/*此處引用上面的公共**
*//*
此處引用上面的公共**
*//*
定位**
*/.wp
.box
123123
/*此處引用上面的公共**
*//*
此處引用上面的公共**
*//*
定位**
*/.wp
.box
123123
text-alignvertical-align
/*此處引用上面的公共**
*//*
此處引用上面的公共**
*//*
定位**
*/.wp
.box
writing-mode
水平方向垂直方向
.div2
水平方向垂直方向
text-alignwriting-modetext-align
123123
/*此處引用上面的公共**
*//*
此處引用上面的公共**
*//*
定位**
*/.wp
.wp-inner
.box
123123
.wp.box
123123
.wp.box
123123
.wp
123123
.wp.box
pc端有相容要求，寬高不固定，推薦css-table
pc端無相容性要求，推薦flex
移動端推薦使用flex
小貼士：關於flex的相容性決方案，請看這裡《移動端flex布局實戰》方法
居中元素定寬高固定
pc相容性
移動端相容性
absolute + 負margin
是ie6+, chrome4+, firefox2+
安卓2.3+, ios6+
absolute + margin auto
是ie6+, chrome4+, firefox2+
安卓2.3+, ios6+
absolute + calc
是ie9+, chrome19+, firefox4+
安卓4.4+, ios6+
absolute + transform
否ie9+, chrome4+, firefox3.5+
安卓3+, ios6+
writing-mode
否ie6+, chrome4+, firefox3.5+
安卓2.3+, ios5.1+
lineheight
否ie6+, chrome4+, firefox2+
安卓2.3+, ios6+
table
否ie6+, chrome4+, firefox2+
安卓2.3+, ios6+
css-table
否ie8+, chrome4+, firefox2+
安卓2.3+, ios6+
flex
否ie10+, chrome4+, firefox2+
安卓2.3+, ios6+
grid
否ie10+, chrome57+, firefox52+
安卓6+, ios10.3+
**自：
css實現水平居中 垂直居中 垂直水平居中布局
1.只需要把行內元素包裹在乙個屬性display為block的父層元素中，並為父層元素新增如下屬性即可 parent2.塊狀元素解決方案 item3.多個塊狀元素解決方案將元素的display屬性設定為inline block，並且把父元素的text align屬性設定為center即可 paren...
css 水平居中 垂直居中 水平垂直居中
一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...
css水平居中 垂直居中 水平垂直居中
css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中，意思是上下距離為0，auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...