前端居中布局的最佳方案

🐰

pc端最佳方案

垂直居中

父盒子有高度时

• 无法兼容IE8

  div{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 50%);
  }

• 兼容IE6

  div{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
  }

父盒子无高度时

• 用于登录类页面在页面居中（有时候可能body的高度为0时，只能用下面的方式）

  .box{
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }

移动端最佳方案（flex）

垂直居中

• 利用flex布局

  div{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 18em;
      height: 10em;
      margin: auto;
  }