CSS实现元素垂直居中

使用position布局

    #block {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }

使用flexbox

    body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

使用table布局

    body {
      display: table;
      width: 100%;
      min-height: 100vh;
      margin: 0;
    }
    .cell {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }