CSS梳理之水平和垂直居中

<div class="wreap"> <div class="box size"></div> </div>複製代碼

.wreap{
    position: relative;
    top: 200px;
    left: 500px;
    width: 300px;
    height: 300px;
    border: 1px solid #000000;
}
.box{
}
.size{
    width: 100px;
    height: 100px;
    background-color: #ff00ff;
}複製代碼

上面是統一的html和css設置。

size樣式用來子元素的寬高變化

1、子元素定寬高

1. absolute + margin

.box{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px; 
}複製代碼

絕對定位absolute會以自身的左上角

相對其父元素的左上角進行定位，因此須要引入負值得margin來修正偏移

2.absolute + calc

.box{
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
}複製代碼

css3 帶來的計算屬性也能夠用來進行修正偏移

3.absolute + auto

.box{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}複製代碼

margin： auto會根據元素的寬高自動計算其margin值，可是若是不加position，auto在計算時margin-top和margin-bottom的值是0，也就是等於margin：0 auto，只能實現水平居中，沒法垂直居中。

以下圖所示：

當設置position並把四周距離都設爲0後，margin-top和margin-bottom的值就出現了，以下圖所示

這個事情看上去比較神奇，其實也是有內在邏輯的。

一個元素既要貼着上邊挨着下邊，還不能拉伸自身高度，那怎麼辦，天然是讓margin動一動啦，一動margin設置的auto就會自動計算上下間距的值，進而實現垂直居中。

經過這裏也能夠看出position:abslote 絕對定位實際上是以盒模型外側左上角做爲基準點實現的。

固然既然討論到了這裏，喜歡搞事的小夥伴天然會想到，那若是我即設置了距離top，right，bottom，left爲0，有設置maigin爲一個定值且小於到達父元素內邊的值會如何呢？

能夠說這種矛盾的定義平常工做中儘可能不要作，固然在這裏搞一下事是沒問題的。

結論以下： 會優先執行margin，可見margin的優先級比position要高一些。

2、子元素不定寬高

效果如上圖所示

1. absolute +tansform

.box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: #ff00ff;
}複製代碼

這個方法是利用了translate計算時是以自身的寬高以標準的特色，來修正top：50%和left：50%所帶來的誤差。

咱們使用了position：absolute是子元素造成了BFC，使其寬高徹底由自身內容撐開，保證了translate計算的準確性。

2. flex

.wreap{
  display: flex;
  justify-content: center;
  align-items: center;
}複製代碼

十分優雅，幾行代碼就好了，並且目前移動端、pc端的兼容性都很不錯，能夠嘗試使用了。

不過我的在小程序（微信）上使用的時候，有時候會有問題.......看業務需求取捨吧~~~

ps：flex是設置在父元素的哈

完結，撒花~~~~~~~~~~~~~~~