github原文：
部落格原文：
css居中作為web前端中無可避免的話題，在面試中也是常常出現，可以說是面試必考。
（當然乙個沒什麼人氣的部落格只是寫給自己看的哈哈哈 不過說不定能被搜到呢
目錄：僅居中元素定寬高適用
居中元素不定寬高
123123
/*公共***/.wp
.box
.box.size
絕對定位的百分比是相對于父元素的寬高，通過這個特性可以讓子元素的居中顯示，但絕對定位是基於子元素的左上角，期望的效果是子元素的中心居中顯示。
為了修正這個問題，可以借助外邊距的負值，負的外邊距可以讓元素向相反方向定位，通過指定子元素的外邊距為子元素寬度一半的負值，就可以讓子元素居中了，css**如下
.wp.box
這個方法較為簡單，但必須知道父元素的寬高，所以比較繁瑣。
與上乙個方法類似，同樣是使用絕對定位。其餘則是對各方向設為0，然後margin設為auto即可。
.wp.box
這個方法也是比較簡單，同時不用知道父元素的寬高，但每次需要設定各個方向為0，不過這個只要設定乙個通用布局就能解決，所以實際上不會太繁瑣。
這個方法是利用了css3的新特性——計算屬性，這個方法類似absolute+負margin的方法，但這裡不用定父元素的寬高（但要定子元素的），因為用了計算屬性可以用百分比和具體數值來做計算。
這裡的是用上和左方向的50%減去子元素的一半實現。
（順便吐槽一下，之前寫過乙個**沒有發現計算屬性這玩意兒，搞得腦闊疼，現在發現了簡直豁然開朗發現新大陸啊！！！！
注！！這裡有個小坑，calc中間的運算子前後一定一定一定一定要加空格！！！
.wp.box
看起來十分高大上的一種方法！也免去了父元素定寬高的尷尬，寫起來簡潔爆了有木有，但是不能寫成通用布局，每次都要寫一遍calc也是有點蛋疼。
哈哈這裡還是絕對布局，別介。
這個方法也不用定父元素寬高，也不用定子元素的寬高，這也是用了css3的新特性，不過是另外乙個新特性——transform，而這裡用的是transfrom的translate屬性。
這裡介紹一下translate屬性，這個屬性可以設定百分比，該屬性是css3的2d轉換屬性。個人感覺如果是直接填具體數值的話，有點像margin屬性，不知道有沒有感覺錯；而如果用百分比的話，這個百分比是相對自身的寬高作的百分比，而非父元素的，這裡和margin就有了區別。裡面的位置引數順序是左、上。
利用自身寬高百分比的原理，我們就容易理解了，top和left設為50%，然後兩個引數都填-50%即可。原理也類似absolute+calc的方法，只不過這裡連子元素的寬高都不用定了。
.wp.box
這個方法完美排除定寬高的缺陷（不管是父還是子的），通用性也強，也可以作為通用布局使用，可以說通用性槓槓的了！唯一的不足是這種方法相容性依賴translate2d的相容性。
這個方法是將子元素設定為行內元素，父元素只要將text-align設為center即可設為水平居中，然後子元素設定vertical-align為middle即可垂直居中。
.wp.box
這種方法不太友善的地方是需要在子元素中將文字顯示重置為想要的效果。
估計很多人也是一樣，在我看到這篇文章的原博文之前，根本沒見過writing-mode這個屬性，別說是用來幹什麼的了，一頭霧水。
簡單來講，writing-mode這個屬性就是可以將父元素中包含的行內元素的顯示方向和排列方向，即縱向、橫向及從左到右、從右到左，具體詳細可以看看css參考手冊
而這其中最神奇的是，writing-mode不僅僅會影響顯示和排列，甚至會影響到其css的作用方向，如width變成高度，text-align可以從水平居中變成垂直的居中！
值得注意的是，祖父元素的writing-mode會影響到孫元素的排列，因此要在該孫元素的父元素writing-mode屬性。
123123
.wp.wp-inner
.box
這種方法較為複雜和繁瑣，我也好不容易才理解了這玩意兒，果真實在是不太適合新手啊，酌情使用吧。
曾經table被用來做頁面布局，現在沒人這麼做了，但table也能夠實現水平垂直居中，但是會增加很多冗餘**。
123123
.wp.box
這個方法雖然理解起來簡單，但就是太麻煩而且太冗餘，看起來都蛋疼，而且不算是table的正常用法，實在不太推薦。
css-table是css中display的的新特性，可以讓我們把普通元素，變為table元素的現實效果，通過這個特性也可以實現水平垂直居中。
.wp.box
這個方法和table的原理一樣，相容性也ok，最重要的是沒那麼冗餘，相比起table的方法，更推薦這種。
flex作為現代布局方案，顛覆了過去的經驗，實現居中也僅需給父元素新增短短幾行**，十分的高大上。
.wp
目前移動端已經相容flex布局，高階大氣上檔次，推薦。
css中display的新特性，grid柵格化布局，實現起來也是十分簡易，理解起來也不難。
.wp.box
這個方法使用的grid布局雖然也實現了居中，但是對於相容性方面來講就不太ok了，比不了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+
另出個小題目：
123123
.red.blue
例項答案點這裡
答錯的童鞋請自動去補一補css基礎知識。
不說了，其實cv了大半篇，這小題目我都答錯了（捂臉，我要去補一補css基礎知識了！！！！
CSS中 水平居中和垂直居中的寫法
作為乙個前端工程師，修改專案的樣式是必不可少的，所以本部落格會講水平居中和垂直居中講解一下 一 對於 行內元素 text align center 二 對於 確定寬度的塊級 元素 1 margin和width實現水平居中 常用 前提 已設定width值 margin left auto margin...
css實現水平垂直居中的10種方式
為了實現上面的效果先來做些準備工作，假設html 如下，總共兩個元素，父元素和子元素 123123 wp是父元素的類名，box是子元素的類名，因為有定寬和不定寬的區別，size用來表示指定寬度，下面是所有效果都要用到的公共 主要是設定顏色和寬高 注意 後面不在重複這段公共 只會給出相應提示 公共 w...
10種CSS水平垂直居中方法
編寫該博文僅僅作為梳理，鞏固學習，加強記憶。場景一 居中元素寬高已知 absolute 負 margin absolute margin auto absolute calc 場景二 居中元素寬高未知absolute transform line height writing mode table ...