元素居中对齐

• 水平居中

  • ​display: inline/inline-block;

    • ​text-align: center;

  • ​display: block;

    • ​margin-left: auto;
      margin-right: auto;

• ​水平垂直居中

  • Position Absolute

    • position: absolute;

      top: 50%;

      left: 50%;

      transform: translateX(-50%) translateY(-50%);

      • 变形：
        ​position: absolute;

        right: 50%;

        bottom: 50%;

        transform: translateX(50%) translateY(50%);

  • Flexbox

    • ​display: flex;

      justify-content: center;

      align-items: center;

  • ​Display Table

    • ​display: table-cell;

      vertical-align: middle;