CSS垂直居中（笔记）

css垂直居中主要分为两种：居中元素宽高已知和居中元素宽高未知

居中元素宽高已知

方案一： absolute + margin auto

.test {
    width: 500px;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
    background: #333333;
    position: relative;
    .child-test {
        height: 10px;
        width: 20px;
        background: red;
        // 核心代码
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
}

方案二： absolute + 负 margin

.test {
    width: 500px;
    height: 300px;
    background: #333333;
    position: relative;
    .child-test {
        height: 10px;
        width: 20px;
        background: red;
        /* 核心代码 */
        position:absolute;
        top: 50%;
        left: 50%;
        margin-top: -5px; // 高的一半
        margin-left: -10px; // 宽的一半
    }
}

方案三： absolute + calc

.test {
    width: 500px;
    height: 300px;
    background: #333333;
    position: relative;
    .child-test {
        height: 10px;
        width: 20px;
        background: red;
        /* 核心代码 */
        position:absolute;
        top: calc(50% - 5px); // 高的一半
        left: calc(50% - 10px); // 宽的一半
    }
}

居中元素宽高未知

方案一：absolute + transform

<div class="test">
     <div class="child-test">内容</div>
</div>

.test {
    width: 500px;
    height: 300px;
    background: #333333;
    position: relative;
    .child-test {
        background: red;
        /* 核心代码 */
        position:absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); // 基于内容自身宽高计算
    }
}

方案二：line-height + vertical-align （父级不设置height）

.test {
    width: 500px;
    background: #333333;
    /* 核心代码 */
    line-height: 500px;
    text-align: center;
    .child-test {
        background: red;
        /* 核心代码 */
        display: inline-block;
        vertical-align: middle;
        line-height: initial;
    }
}

方案三：table 表格元素

经典的 table 元素来进行水平垂直居中，不过代码看起来会很冗余，不推荐使用；

<table>
  <tbody>
    <tr>
      <td class="test">
        <div class="child-test"></div>
      </td>
    </tr>
  </tbody>
</table>

<style>
  .test{
    width: 500px;
    height: 300px;
    border: 3px solid steelblue;
    /* 核心代码 */
    text-align: center;
  }
  .child-test {
    background: red;
    /* 核心代码 */
    display: inline-block;
  }
</style>

方案四： css-table 表格样式

如果一定要使用 table 的特性，但是不想写 table 元素的话，那么css-table 就很适合

.test{
  width: 500px;
  height: 300px;
  border: 3px solid steelblue;
  /* 核心代码 */
  display: table-cell;
  text-align: center;
  vertical-align: middle;
    .child-test{
      background: red;
      /* 核心代码 */
      display: inline-block;
    }
}

方案五：flex 布局（一）

.test {
    width: 500px;
    height: 300px;
    background: #606266;
    /* 核心代码 */
    display: flex;
    // justify-content 表示：设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；
    justify-content: center; 
     // align-items 表示：定义 flex 子项在 flex 容器的当前行的侧轴（纵轴）方向上的对齐方式。
    align-items: center; 
    .child-test {
        background: red;
    }
}

方案六：flex + margin auto（二）

.test {
    width: 500px;
    height: 300px;
    background: #606266;
    /* 核心代码 */
    display: flex;
    .child-test {
        background: red;
        /* 核心代码 */
        margin: auto;
    }
}

方案七：grid 网格布局 (一)

.test {
    width: 500px;
    height: 300px;
    background: #606266;
    /* 核心代码 */
    display: grid;
    align-items: center;
    justify-content: center;
    .child-test {
        background: red;
    }
}

方案八：grid 网格布局 (二)

.test {
    width: 500px;
    height: 300px;
    background: #606266;
    /* 核心代码 */
    display: grid;
    .child-test {
        background: red;
        /* 核心代码 */
        align-self: center;
        justify-self: center;
    }
}

在学习了上面的 ，简单概括一下

• 项目在 PC 端有兼容性要求并且宽高固定，推荐使用 absolute + 负 margin 方法实现；

• 项目在 PC 端有兼容性要求并且宽高不固定，推荐使用 css-table 方式实现；

• 项目在 PC 端无兼容性要求 ，推荐使用 flex 实现居中，当然不考虑 IE 的话，grid 也是个不错的选择；

• 项目在移动端使用 ，那么推荐使用 flex ，grid 也可作为备选。

 参考资料：【爆肝面试系列】CSS 垂直居中的正确打开方式 - 掘金