居中佈局在實際場景中很常見，在面試當中也經常會被考察。

以下分別是水平居中和垂直居中常用的樣式。

水平居中

margin: 0 auto; + width 應用於塊級元素居於容器中間

• 若節點不是塊級元素，需聲明display: block
• 若節點寬度已隱式聲明則無需顯式聲明width

<div class="h-c1">
    <p>談笑有鴻儒，往來無白丁。談笑有鴻儒，往來無白丁。</p>
</div>

.h-c1 {
  margin: 0 auto;
  width: fit-content; // 300px;
  background-color: #fcc;
}

text-align: center; 應用於行內元素居中

• 父節點聲明text-align
• 若節點不是行內元素需聲明display: inline/inline-block

使行內元素居於父級容器中間，可用於使文本內容水平居中。

<div class="h-c3">
    <span>談笑有鴻儒，往來無白丁。談笑有鴻儒，往來無白丁。</span>
</div>

.h-c3 {
  text-align: center;
  background-color: #fc0;
}

position + left/right + margin-left/right + width：應用於全部元素

• 適用於父子元素的寬度都確定的情況
• 子絕父相。父：position: relative，子：position: absolute。

<div class="h-c4">
    <div class="h-c4-child">
        <span>談笑有鴻儒，往來無白丁。談笑有鴻儒，往來無白丁。</span>
    </div>
</div>

.h-c4 {
    position: relative;
    width: 500px; /*或者寬度隱式聲明*/
    height: 30px;

    .h-c4-child {
      position: absolute;
      width: 300px;
      left: 50%; /* 相對於父元素的寬度 */
      margin-left: -150px; /* 子元素寬度的一半的負數 */
      background-color: #fbf;
    }
}

position + left/right + transform: translateX(-50%)：應用於全部元素

• 適用於父元素寬度確定的情況
• 子元素未設置寬度時，默認為父元素寬度的一半
• 子絕父相。父：position: relative，子：position: absolute。

<div class="h-c5">
    <p class="h-c5-child">談笑有鴻儒，往來無白丁。談笑有鴻儒，往來無白丁。</p>
</div>

.h-c5 {
    position: relative;
    width: 600px; /*或者寬度隱式聲明*/
    height: 50px;
    background-color: #fbe;

    .h-c5-child {
      position: absolute;
      left: 50%; /* 相對於父元素的寬度 */
      transform: translateX(-50%); /* 相對於自己的寬度 */
      background-color: #fbf;
    }
}

display: flex + justify-content: center：應用於全部元素的子節點（彈性佈局）

<div class="h-c6">
    <p>談笑有鴻儒，往來無白丁。談笑有鴻儒，往來無白丁。</p>
</div>

.h-c6 {
    display: flex;
    justify-content: center;
    background-color: yellowgreen;
}

垂直居中

padding-top/bottom：應用於塊級元素

• 父元素高度由子元素高度撐開（自適應）
• 子元素設置padding-top和padding-bottom相等
• 若節點不是塊級元素需聲明display: block

<div class="v-c1">
  <div class="v-c1-child">
    <span>談笑有鴻儒，往來無白丁。談笑有鴻儒，往來無白丁。</span>
  </div>
</div>

.v-c1 {
    background-color: #ffcc00;
    .v-c1-child {
      padding: 20px 0;
      background-color: #fff;
      background-clip: content-box;
    }
}

line-height：應用於行內元素

• 父節點聲明line-height。line-height與height相等
• 若節點不是行內元素需聲明display: inline/inline-block

使行內元素居於父級容器中間，可用於使文本內容垂直居中。

<div class="v-c2">
    <span>談笑有鴻儒，往來無白丁。談笑有鴻儒，往來無白丁。</span>
</div>

.v-c2 {
  height: 100px;
  line-height: 100px;
  background-color: #6666ff;

  span {
    display: inline-block; /* 或inline */
    height: 30px;
    line-height: 30px;
    vertical-align: middle; /* 行內塊級元素與匿名行內盒的基線對齊存在很大差異，所以需聲明vertical-align:middle將其調整到垂直居中的位置 */
    background-color: red;
  }
}

display: table + display: table-cell + vertical-align: middle：應用於全部元素

<div class="v-c3">
    <div class="v-c3-child">display:table + display:table-cell + vertical-align:middle</div>
</div>

.v-c3 {
  display: table;
  height: 100px;
  background-color: #6666ff;

  .v-c3-child {
    display: table-cell;
    height: 50px; /* 設置高度無用，會與父節點高度一樣 */
    vertical-align: middle;
    background-color: red;
  }
}

display: table-cell + vertical-align: middle：應用於全部元素的子節點

• 父節點聲明display: table-cell模擬表格佈局的垂直居中

  <div class="v-c4">
    <div>display:table-cell + vertical-align:middle</div>
  </div>

  .v-c4 {
  height: 100px;
  display: table-cell;
  vertical-align: middle;
  background-color: bisque;
  }

position + top/bottom + margin-top/bottom + height：應用於全部元素

• 適用於父子元素的高度都確定的情況
• 子絕父相。父：position: relative，子：position: absolute。

<div class="v-c5">
    <div class="v-c5-child">position + top/bottom + margin-top/bottom + height</div>
</div>

.v-c5 {
  position: relative;
  height: 100px;
  background-color: coral;

  .v-c5-child {
    position: absolute;
    top: 50%; /* 相對於父元素的高度 */
    height: 70px;
    margin-top: -35px; /* 子元素高度的一半的負數 */
    background-color: #6666ff;
  }
}

position + top/bottom + transform: translateY(-50%)：應用於全部元素

• 適用於父元素高度確定的情況
• 子絕父相。父：position: relative，子：position: absolute。

<div class="v-c6">
    <div class="v-c6-child">position + top/bottom + transform:translateY(-50%)</div>
</div>

.v-c6 {
  position: relative;
  height: 100px;
  background-color: #ffcc00;

  .v-c6-child {
    position: absolute;
    top: 50%; /* 相對於父元素的高度 */
    transform: translateY(-50%); /* 相對於自己的高度 */
    background-color: #6666ff;
  }
}

display: flex + align-item: center：應用於全部元素的子節點（彈性佈局）

<div class="v-c7">
    <div>display: flex;</div>
    <span>display: flex;</span>
</div>

.v-c7 {
  display: flex;
  align-items: center;
  height: 100px;
  background-color: #ffbb00;
}

display: flex + margin: auto 0：應用於全部元素

• 父節點聲明display: flex;
• 子節點聲明margin: auto 0;

<div class="v-c8">
    <span class="v-c8-child">display: flex; margin: auto 0;</span>
</div>

.v-c8 {
  display: flex;
  height: 100px;
  background-color: #ffbbff;

  .v-c8-child {
    margin: auto 0; /* 只設置auto 可以讓水平和垂直都居中 */
  }
}

父節點聲明display: flex生成FFC容器，子節點聲明margin: auto讓瀏覽器自動計算子節點到父節點邊上的距離。