技術標籤：css3html5前端

盒子水平居中的幾種方案

這種需求在我之前的專案當中是非常常見的剛開始的時候我是用position定位的方式來實現的，後來隨著css3的興起，display:flex的方式尤其是在移動端開發的時候來實現它是非常強大的，然後有一段時間我在看部落格的時候發現display:table-cell的方式雖然不常用但是也可以實現，當然還有position+calc計算的方式，js方式，grid網格佈局方式都可以實現

定位三種

定位一：

absolute + 負margin(子盒子寬高的一半)（一定要知道子元素的寬高）

.parent{
      width: 400px;
 

      height: 400px;      
      border: 1px solid red;
      position: relative;
    }
    .child{
      width: 100px;
      height: 100px;
      background-color: blueviolet;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -50px;
      margin-top: -50px;
    }

<div class="parent">
    <div class="child"></div>
  </div>
 

缺點：需要知道子元素的寬高
優點：比較好理解，相容性好

定位二：

absolute + margin auto 有寬高但不需要考慮

.parent{
      width: 400px;
      height: 400px;      
      border: 1px solid red;
      position: relative;
    }
    .child{
      width: 100px;
      height: 100px;
      background-color: blueviolet;
      position: absolute;
      top
 
: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }

<div class="parent">
    <div class="child"></div>
  </div>

優點：相容性也很好
缺點：需要知道子元素的寬高

定位三：

absolute + transform（子盒子有或沒有寬高的時候都適用）

.parent{
      width: 400px;
      height: 400px;      
      border: 1px solid red;
      position: relative;
    }
    .child{
      width: 100px;
      height: 100px;
      background-color: blueviolet;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

<div class="parent">
    <div class="child"></div>
  </div> 

優點：程式碼量少
缺點：IE8不支援, 屬性需要追加瀏覽器廠商字首, 可能干擾其他 transform 效果, 某些情形下會出現文字或元素邊界渲染模糊的現象.

absolute + calc（計算）

.parent{
      width: 400px;
      height: 400px;      
      border: 1px solid red;
      position: relative;
    }
    .child{
      width: 100px;
      height: 100px;
      background-color: blueviolet;
      position: absolute;
      top: calc(50% - 50px);
      left: calc(50% - 50px);
    }

<div class="parent">
    <div class="child"></div>
  </div>

詳解：這種方法top的百分比是基於元素的左上角，那麼在減去寬度與高度的一半就好了

calc:任何長度值都可以使用calc()函式進行計算； calc()函式使用標準的數學運算優先順序規則； 它支援 “+”, “-”, “*”, “/” 運算

檢視calc教程：https://www.runoob.com/cssref/func-calc.html

優點：他的相容性依賴的是calc的相容性

缺點：同樣是需要知道子元素的寬高

display:flex

.parent{
      width: 400px;
      height: 400px;
      border: 1px solid red;
      display: flex;
      justify-content: center;
      align-items: center;
      align-self: center;
    }
    .child{
      width: 50px;
      height: 50px;
      background-color: blueviolet;
    }

<div class="parent">
<div class="child"></div>
</div>   

優點：移動端使用靈活自如

缺點：pc端需要根據相容情況來判定

js方式

body{
      position: relative;
    }
    #box{
      width: 400px;
      height: 400px;
      background-color: blueviolet;
    }

<script>
  let HTML = document.documentElement,
      winW = HTML.clientWidth,
      winH = HTML.clientHeight,
      boxW = box.offsetWidth,
      boxH = box.offsetHeight;
      box.style.position = "absolute";
      box.style.left = (winW -  boxW)/2+'px';
      box.style.top = (winH - boxH)/2+'px'
</script>

<div id="box"></div>  

display：table-cell

table-cell實現水平垂直居中: table-cell middle center組合使用

.parent{
      width: 400px;
      height: 400px;
      border: 1px solid red;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
    .child{
      display: inline-block;
      width: 50px;
      height: 50px;
      background-color: blueviolet;
    }

<div class="parent">
<div class="child"></div>
</div>

grid網格佈局

給父級設display:grid; 給子元素設align-self: center;justify-self: center;

.parent{
      width: 400px;
      height: 400px;      
      border: 1px solid red;
      display: grid;
    }
    .child{
      width: 100px;
      height: 100px;
      background-color: blueviolet;
      align-self: center;
      justify-self: center;
    }

優點：程式碼量少

缺點：相容不如flex，建議用flex

js-getBoundingClientRect(可以試一試)