class="parent">
class="child">demodiv>
div>
複製**
.parent
.child
複製**
inline-block是個很特殊的屬性，既有inline文字的特性，又有block布局的特性；因此，用上inline-block，既可以讓div像文字一樣居中（text-align: center;），又不會影響div本身的寬高。 這個方案有個缺陷，就是由於在parent上設定了text-align: center，因此child裡的元素都會繼承這個text-align: center，需要重新設定個text-align: left來reset一下。
這種方法非常常用，適用於需要用position:static把盒子撐起來的情況下的水平居中。但值得注意的是，使用block的話，child的預設寬度會撐滿整個parent，因此需要顯式地定義其width；而使用table的話，其預設寬度為child的內容寬度，這樣一來，即使加上padding和border，也能順利實現水平居中，在實際場景中是比block要好用的。 .child
.parent
複製**
**布局已經是上世紀的布局方式了，但當時布局所用到的一些特性，還一直被瀏覽器相容著，其中就包括這個table-cell的方案。 從某種意義上來看，跟inline-block方案很相像，都是利用了文字排版的特性，但差別在於，本方案並不需要把child設定為inline-block也可生效。
這種方法也比較常用，先利用positions: absolute;left: 50%的特性，使child的左側移至parent的水平**處，然後再施以負的margin-left使child水平左移child寬度的一半距離，即最終使child的水平**與parent的水平**重合；在垂直方向上，也是一樣的原理。 這個方法用起來不複雜，原理也很容易理解，但是缺點也非常明顯：
從上文可知，負margin方案的問題在於要確定width和height，無法做到自適應；於是，為了要做到自適應，我們可以把負margin換成transform實現child自身的偏移。 .parent .child
由於transform這一屬性在設定百分比型別的值時，其參照物件是自身，因此只需要各設定50%，就能實現往水平方向偏移自身寬度的一半，又或者是往垂直方向偏移自身高度的一半。 總體來說，這個方案靈活是夠靈活的了，但是transform的相容性堪憂，移動端還好說，pc端怎麼敢用？
跟上文的transform方案想必，flex（彈性盒子）的方案相容性就更令人擔憂了，pc端不要鬧了，連移動端要相容起來也很麻煩，基本上是只能使用老版的彈性盒子了。 .parent
.parent
.child
複製**
inline-block水平居中方案以及table-cell垂直居中方案的合用，也算是把文字排版的特性都利用了個遍了。 居中布局之水平垂直布局
命題 如下不定寬高的父元素與子元素 div class parent div class child demo div div 問題一 使子元素水平居中 方案1 child進行相容 parent 優點 瀏覽器相容性好 缺點 子元素會繼承文字居中特性，故如不希望子元素中文字居中，可對子元素設定 方案2...
CSS布局 水平垂直居中
題外話 這是乙個讓人抓狂的問題。html文件結構如下 實現效果 1.子元素已知寬高 給父容器設定相對定位 relative 子元素設定為絕對定位 absolute top left設定為50 margin top margin left分別設定為高寬的一半的負數。outer inner 2.子元素未...
CSS 布局 水平垂直居中
原理 首先利用 absolute 定位把容器塊左頂角對準瀏覽器中心，然後再使用 負 margin 把容器塊向左移動自身寬度的一半，向上移動自身高度的一半，即可以把容器塊的中心移到瀏覽器中心。優點 相容性好 缺點 需要知道寬高，不夠靈活 container原理 首先利用 absolute 定位把容器塊...