css 實現水平居中，垂直居中，水平垂直居中，是css 入門的必修課題，也是程式碼實踐,筆試面試中經常遇到的場景。這次的內容主要圍繞著幾種場景下的，多種水平居中方法的實現

實現場景：藍色方塊需要在父元素內部水平居中

1. 居中元素為塊級元素

基礎程式碼

<div class="container">
    <div class="box">牛</div>
</div>

.container{
  width: 100px;
  border:1px solid red;
  height: 100px;
}
.container
 
 .box{
  font-size: 20px;
  line-height: 50px;
  background-color: blue;
  color: white;
}

塊級元素的特點：可設定元素的寬度，在不設定寬度時， 元素的寬度會自動填滿其父元素寬度，並獨佔一行

1.1 margin: auto

居中元素設定寬度，並且設定 margin: auto 可實現水平居中

.container .box{
  height: 50px;
  width: 50px; /* 設定寬度 */
  margin: 0 auto; /* 設定寬度 */
}

問題： margin: auto 實現水平居中的前提是， 元素的寬度已知，當寬度值未知時，見2.2

2. 居中元素為行內元素

基礎程式碼

<div class="container">
    <span class="box">牛</span>
</div>

.container{
  width: 100px;
  border:1px solid red;
  height: 100px;
}
.container .box{
  font-size: 20px;
  background-color: blue;
  color: white;
}

行內元素的特點： 行內元素的寬度為元素自身撐起的寬度，和其他元素在同一行，高度，寬度，內邊距等都是不可控的，即設定padding-left, padding-right, margin-left, margin-right, height, width 都無法生效

2.1 text-align: center

利用行內元素的特點，設定 text-align：center 使元素居中

.container{
  text-align: center;
}

2.2 display：inline-block 改變模型

利用 行內元素設定 text-align 實現水平居中的方法，可以針對居中元素為塊級元素，但寬度不確定時 （即1.1 問題)的場景

<div class="container">
    <div class="box">牛</div>
  </div>

.container{
  text-align: center;
}
.container .box{
  display: inline-block;
  *display: inline; /*相容性程式碼*/
  *zoom: 1; /*相容程式碼*/
}

問題: 需要解決 display: inline-block 在IE 下的相容性問題

3. 利用定位實現水平居中(已知寬度)

相對定位： 相對定位就是將元素偏離元素的預設位置，但是並沒有脫離文件流，只是視覺上發生的偏移，不會改變元素的display 屬性

絕對定位： 相對於設定了 相對定位的上層元素或者頂級元素的相對位置，無論設定的元素為塊級元素還是行內元素，position 設定成absolute 之後 ， 元素display 表現為 block， 元素脫離文件流，父元素無法知道該元素的高度

因此，從以上的定義我們可以得到一種新的水平居中的方式，父級元素設為相對定位，居中元素設定為絕對定位，設定居中元素的寬度，並相對於父元素設定位置

.container{
  position: relative;
}
.container .box{
  position: absolute;
  width: 50px; /*設定寬度*/
  left: 50%; /*左移50%*/
  margin-left: -25px; /*修正位置*/
}

缺點： 缺點是需要知道元素的寬度

4 利用定位，translate 實現水平居中(未知寬度)

對於已知元素的寬度，我們可以使用3中的 margin-left: -25px; /*修正位置*/ 進行精確的定位，而對於不知道寬度的元素，我們可以使用 translate 來精準定位，只需要將 margin-left: -25px; /*修正位置*/ 替換成 transform: translate(-50%, 0) 即可

.container .box{
  font-size: 20px;
  background-color: blue;
  color: white;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  width: 50px;
}

5. flex 佈局實現

Flex是Flexible Box的縮寫，意為”彈性佈局”，父元素設定成flex 佈局，可以將子元素設定為水平居中， （但是flex佈局部分瀏覽器無法使用）

.container{
  display: flex;
  justify-content: center
}

6. tabel-cell佈局

實際專案中並不常見，故暫不提及。