僅居中元素定寬高適用
居中元素不定寬高
absolute + 負margin
為了實現上面的效果先來做些準備工作，假設html**如下，總共兩個元素，父元素和子元素
class="wp">
class="box size">123123
注意：後面不在重複這段公共**，只會給出相應提示
/* 公共** */
.wp.box
.box.size
/* 公共** */
為了修正這個問題，可以借助外邊距的負值，負的外邊距可以讓元素向相反方向定位，通過指定子元素的外邊距為子元素寬度一半的負值，就可以讓子元素居中了，css**如下
/* 此處引用上面的公共** */
/* 定位** */
.wp.box
absolute + margin auto
這種方式也要求居中元素的寬高必須固定，html**如下
class="wp">
class="box size">123123
/* 此處引用上面的公共** */
/* 此處引用上面的公共** */
/* 定位** */
.wp.box
absolute + calc
這種方式也要求居中元素的寬高必須固定，所以我們為box增加size類，html**如下
class="wp">
class="box size">123123
/* 此處引用上面的公共** */
/* 此處引用上面的公共** */
/* 定位***/
.wp.box
absolute + transform
還是絕對定位，但這個方法不需要子元素固定寬高，所以不再需要size類了，html**如下
class="wp">
class="box">123123
/* 此處引用上面的公共** */
/* 此處引用上面的公共** */
/* 定位** */
.wp.box
lineheight
利用行內元素居中屬性也可以做到水平垂直居中，html**如下
class="wp">
class="box">123123
text-align就可以做到水平居中，但很多同學可能不知道通過通過vertical-align也可以在垂直方向做到居中，**如下
/* 此處引用上面的公共** */
/* 此處引用上面的公共** */
/* 定位** */
.wp.box
writing-mode
很多同學一定和我一樣不知道writing-mode屬性，感謝@張鑫旭老師的反饋，簡單來說writing-mode可以改變文字的顯示方向，比如可以通過writing-mode讓文字的顯示變為垂直方向
class="div1">水平方向
="div2">垂直方向
.div2
水平方向垂直
方向
text-align，通過writing-mode和text-align就可以做到水平和垂直方向的居中了，只不過要稍微麻煩一點
class="wp">
class="wp-inner">
class="box">123123
/* 此處引用上面的公共** */
/* 此處引用上面的公共** */
/* 定位** */
.wp.wp-inner
.box
table
曾經table被用來做頁面布局，現在沒人這麼做了，但table也能夠實現水平垂直居中，但是會增加很多冗餘**
class="wp">
class="box">123123
.wp
.box
css-table
css新增的table屬性，可以讓我們把普通元素，變為table元素的現實效果，通過這個特性也可以實現水平垂直居中
class="wp">
class="box">123123
.wp
.box
flex
flex作為現代的布局方案，顛覆了過去的經驗，只需幾行**就可以優雅的做到水平垂直居中
class="wp">
class="box">123123
.wp
grid
感謝@一絲姐 反饋的這個方案，css新出的網格布局，由於相容性不太好，一直沒太關注，通過grid也可以實現水平垂直居中
class="wp">
class="box">123123
.wp.box
總結下面對比下各個方式的優缺點，肯定又雙叒叕該有同學說回字的寫法了，簡單總結下
方法居中元素定寬高固定pc相容性移動端相容性
方法居中元素定寬高固定
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...