垂直居中与水平居中的方法汇总

垂直居中

• 如果是 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