水平居中這個問題首先要搞清楚存在兩個條件才能夠稱之為水平居中，
即父元素必須是塊級盒子容器，父元素寬度必須已經被設定好
以下討論 參考這個結構
class="wrap">
class="non-child">
non-child
div>
div>
這種情況下不存在水平居中的說法，因為子元素是塊級元素沒有設定寬度，那麼它會填充滿整個父級元素的寬度。
.wrap
.non-child
.center
.center
.padding
（父元素寬度-子元素寬度）/2
其實跟第一種的原理是一樣的。
設定margin-left也一樣
不過這裡注意的是，如果指定了box-sizing就要不同的考慮。
注意box-sizing
box-sizing:border-box
瀏覽器預設認為是content-box：指定寬度和高度分別應用於元素的內容框。
在寬度和高度之外繪製元素的padding和border
border-box:指定高度和寬度確定元素邊框box，對元素的寬度和高度的指定包括了border和padding的指定。
第三種
絕對定位
.relative
.absolute
父元素是盒子容器，而且高度已經設定好。
子元素是行內元素，高度是其內容撐開
這種情況需要設定父元素的line-height為其高度來使得子元素垂直居中
line-height是文字行基線之間的距離~
子元素是塊級元素但是子元素高度沒有設定，在這種情況下實際上是不知道子元素的高度的，無法通過計算得到paddin或margin來調整。
**解法1 ：給父元素設定display:table-cell;
vertical-align:middle來解決**
.child
.wrap
解法一
計算子元素的margin-top或margin-bottom，計算方法為父(元素高度-子元素高度)/2
或者 計算子元素的padding-top或padding-bottom
.wrap
.child
利用絕對定位，
.child
.wrap
使用flexbox
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...
css實現水平居中 垂直居中 垂直水平居中布局
1.只需要把行內元素包裹在乙個屬性display為block的父層元素中，並為父層元素新增如下屬性即可 parent2.塊狀元素解決方案 item3.多個塊狀元素解決方案將元素的display屬性設定為inline block，並且把父元素的text align屬性設定為center即可 paren...