css中元素的垂直水平居中是比較常見及較常使用的，在這裡向大家介紹一下幾種方式。
margin: 0 auto;效果圖：
而文字的垂直水平居中也比較簡單，加上line-height: 200px;與text-align: center;即可。
#test
效果圖：
相對於文字來講，元素的垂直水平居中就沒這麼簡單，因為line-height: 200px;與text-align: center;都是針對文字的屬性，對於元素我們需要使用定位。
a.已知元素高寬的垂直水平居中
#wrap#inner
<testdiv
id="wrap"
>
div>效果圖：
在這裡需要注意margin-left與margin-top需要給定-50px即當前元素的一半而非-50%，因為%是相對于父元素的大小，所以這種需要已知元素的高寬。
而除了給margin負值外，還有一種方式：
#wrap#inner效果圖：
這裡需要注意的是元素的高寬也需要定義，如果沒有定義高寬元素會填充整個父元素。
而此種方式就要說到絕對定位盒子的特性：
1.高寬有內容撐開
2.水平方向上： left + right + width + padding + margin = 包含塊padding區域的尺寸
3.垂直方向上： top + bottom + height + padding + margin = 包含塊padding區域的尺寸
我們可以嘗試代入引數：
水平：0 + 0 + 100 + 0 + auto = 400
margin：auto根據公式可得300px及左右各分得150px，
垂直：0 + 0 + 100 + 0 + auto = 600
margin：auto根據公式可得500px及左右各分得250px，
而前面提到的如果沒有定義高寬則高寬預設值為auto，
水平：0 + 0 + auto + 0 + auto = 400
垂直：0 + 0 + auto + 0 + auto = 600
元素會填充整個父元素即包含塊尺寸均分配給高寬，由此可知高寬優先順序高於margin。
而如果不定義margin: auto;
水平：0 + 0 + 100 + 0 + 0 = 400
垂直：0 + 0 + 100 + 0 + 0 = 600
資料均定死則不會分配margin
b.未知元素高寬的垂直水平居中
#wrap#inner效果圖：
對於translate3d(-50%,-50%,0)中的三個引數分別為x軸偏移自身一半、y軸偏移自身一半、z軸不動，但是在can i use中我們可以看到transform的相容性並不是太好。
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...
關於水平垂直居中的幾種方式
1.如果要設定某個元素在窗體中水平垂直居中的話，將此元素設定為絕對定位 不設定其祖先為相對定位，讓其預設針對窗體定位 然後設定元素的margin值為auto,在設定定位的上下左右都為0,即可實現此元素在窗體中水平垂直居中。如 margin auto position absolute top 0 b...