垂直居中與水平居中的方法彙總

垂直居中

• 如果是 inline 元素，並且父元素高度已知。可使用樣式 line-height:父元素高度

• 如果是 inline-block 元素

  • 利用父元素的僞元素和 vertical-align 樣式：

    • .father:after, .son{
          display:inline-block;
          vertical-align:middle;
      }
      .father:after{
          content:"";
          height:100%;
      }
      

  • 利用 table 樣式

    • .father{
          display:table;
      }
      .son{
          display:table-cell;
          vertical-align:middle;
      }
      

• 如果 position 是 absolute/fixed

  • 可以藉助 position + margin 樣式組合：

    • position:absolute;height:固定;top:0;bottom:0;margin:auto 0
    • position:absolute;top:50%;margin-top:-0.5*高度

  • 可以藉助 position + transform 樣式組合：

    • position:absolute;top:50%;transform:translateY(-50%);

• flex 方案：display:flex;align-items:center;

水平居中

• 如果是 inline 或者 inline-block 元素，則可在父元素添加樣式：text-align:center

• 如果是 block 元素

  • 可以使用樣式 margin:0 auto;

• 如果 position 是 absolute/fixed

  • 可以藉助 position + margin 樣式組合：

    • position:absolute;width:固定;left:0;right:0;margin:0 auto
    • position:absolute;left:50%;margin-left:-0.5*寬度

  • 可以藉助 position + transform 樣式組合：

    • position:absolute;left:50%;transform:translateX(-50%);

• flex 方案：display:flex;justify-content:center;

文獻

https://juejin.im/post/58f818bbb123db006233ab2a