小tip: margin:auto實現絕對定位元素的水平垂直居中
如何只用css做到完全居中
.element不足：
.element好處：不足：
.element原理： top、right、bottom、left 屬性都是指外邊距邊界距離父元素內邊距邊界的距離。當寬度固定時，設定 left: 0; right: 0; margin: auto; 可以讓左右外邊距自適應，使之讓元素的寬度 + 元素的左右外邊距 + 元素的左右邊框 + 元素的左右內邊距 = 父元素的寬度。
支援 table-cell 方法的瀏覽器使用 table-cell
不支援的 ie 6/7 ，使用 position:absolute 和 position: relative
content
.m-demo
.g-bothctr-4
.g-bothctr-4 .tablecell
.g-bothctr-4 .cnt
/*需要注意的是，使用這種方法，如果你的居中元素是放在body中的話，你需要給html,body設定乙個「height:100%」的屬性。*/
內容區宣告的寬度不能大於容器的100% 減去0.25em的寬度。就像一段帶有長文字的區域。不然，內容區域會被推到頂端，這就是使用:after偽類的原因。使用:before偽類則會讓元素有100%的大小！
如果內容塊需要盡可能大地占用水平空間，可以為大容器加上max-width: 99%;樣式，或者考慮瀏覽器和容器寬度的情況下使用max-width: calc(100% – 0.25em) 樣式。
這種方法和table-cell的大多數好處相同，不過最初我放棄了這個方法，因為它更像是hack。不管這一點的話，瀏覽器支援很不錯，而且也被證實是很流行的方法。
.center-container.is-inline
.center-container.is-inline:after,
.is-inline .center-block
.center-container.is-inline:after
.is-inline .center-block
不足：
css未來發展的方向就是採用flexbox這種設計，解決像垂直居中這種共同的問題。請注意，flexbox有不止一種辦法居中，他也可以用來分欄，並解決奇奇怪怪的布局問題。
.center-container.is-flexbox不足：
html,body
.m-demo
.m-demo > div
/*.m-demo > div*/
擴充套件性：高寬不可擴充套件
塊元素水平垂直居中方法彙總
無論在平時專案中還是在面試中，遇到塊元素水平垂直居中的需求比較多。在此做下彙總 一 塊元素寬高固定 方法1 最普通常用方法 target 方法2 利用盒模型特性，當absolute定位元素偏移 top lelft right bottom 與其他屬性衝突時，則忽略偏移以其他屬性值為準。target ...
塊級元素水平垂直居中方法
一 加padding減height 垂直水平居中方法一 padding top box2高度 box1高度 2 height 原height值 padding top值 box2 margin 0 auto 脫離標準流的盒子該屬性值失效 優缺點 要先知道盒子的寬高，居中盒子不能脫離標準流 二 子絕父...
CSS垂直居中水平居中方法
center 剛在別人的部落格裡看到這種方法時真的覺得很奇葩，以下是大神的解釋 解釋 1 在普通內容流中，margin auto的效果等同於margin top 0 margin bottom 0。2 position absolute使絕對定位塊跳出了內容流，內容流中的其餘部分渲染時絕對定位部分不...