CSS实现子盒子水平垂直居中的几种方式这是一个面试必考，工作必用的一个问题，这里我将其总结全了介绍给大家； 实践 实现子

前言

这是一个面试必考，工作必用的一个问题，这里我将其总结全了介绍给大家；

实践

实现子盒子水平垂直居中主要有两种场景：1、子盒子定宽高；2、子盒子没有宽高；

但是其实两者的关系是包含关系：子盒子没有宽高的方式也适用于子盒子定宽高；

我们将基于以上两个场景，来分别介绍：

假设html代码如下，且size用来决定是定宽还是没有宽度的：

<style>
  .father {
    border: 1px solid red;
    width: 300px;
    height: 300px;
  }
  .son {
    background: pink;
  }
  .son,
  .size {
    width: 100px;
    height: 100px;
  }
</style>

<div class="father">
  <div class="son size">我是子盒子</div>
</div>

展示出来的样式如下：

那么之后的代码都是基于上述的代码进行修改添加，且不再撰写上面的重复代码了。

子盒子定宽高

绝对定位的百分比是相对于父元素的宽高，在定宽高的场景下，我们可以用这个特性，让子元素居中显示，但是呢，绝对定位的基准是元素的左上角，我们单独使用绝对定位的话，会让子元素的左上角水平垂直居中，如这样：

所以需要借用一个属性去将子盒子的中心水平居中，以下两个方式分别采用margin和calc来处理：

absolute + margin负值

<style>
  .father {
    ......,
    position: relative;
  }
  .son {
    ......,
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
  }
  ......
</style>

absolute + calc

<style>
  .father {
    ......,
    position: relative;
  }
  .son {
    ......,
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
  }
  ......
</style>

absolute + margin auto

设置top: 0;left: 0;right: 0;bottom: 0;会让子元素填满父元素的可用空间，而margin:auto;则用于在水平和垂直方向上居中子元素；

设置top: 0;left: 0;right: 0;bottom: 0;：

未设置top: 0;left: 0;right: 0;bottom: 0;：

<style>
  .father {
    ......,
    position: relative;
  }
  .son {
    ......,
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  ......
</style>

子盒子没有宽高

首先将子元素的宽高注释掉：

<style>
  .father {
    border: 1px solid red;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .son {
    background: pink;
  }
  
  注释掉：
  /* .son,
  .size {
    width: 100px;
    height: 100px;
  } */
  
</style>

<div class="father">
  <div class="son size">我是子盒子</div>
</div>

absolute + transform

这个方式与子盒子有宽高的场景下前两种方式原理一样，区别在于，使用了transform属性，相对于自身的宽高，向右向下平移自身宽高的50%，我也比较常用这种方法，且该方式也适用于子盒子有宽高的场景：

<style>
  .father {
    ......,
    position: relative;
  }
  .son {
    ......,
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  ......
</style>

flex

flex布局，就不用多说了吧，懂得都懂，三属性解决一切：

<style>
  .father {
    ......,
    display: flex;
    justify-content: center;
    align-items: center;
  }
  ......
</style>

grid

grid布局，也是使用三个属性,与flex区别在于，子元素也要设置属性：

<style>
  .father {
    ......,
    display: grid;
  }
  .son {
    ......,
    align-self: center;
    justify-self: center;
  }
  ......
</style>

css-table

CSS-Table 是一种使用 CSS 来模拟和控制表格布局的方式:

在传统的 HTML 表格（<table>、<tr>、<td>）中，布局和样式的控制相对有限,而 CSS-Table 则提供了更灵活和强大的方式来实现类似表格的布局效果。

例如，可以使用以下 CSS 属性来创建类似表格的布局：

• display: table; ：将元素定义为表格容器。
• display: table-row; ：将元素定义为表格行。
• display: table-cell; ：将元素定义为表格单元格。

<style>
  .father {
    ......
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  .son {
     ......
    display: inline-block;
  }
</style>

table

与上面的原理一样，table也可以用来做水平垂直居中，但是缺点就是会增加很多冗余的代码，太麻烦了，还需要改html的结构

table的单元格中的内容天然就是垂直居中的，只需要添加一个水平垂直居中的属性text-align: center;

<style>
  .father {
    border: 1px solid red;
    width: 300px;
    height: 300px;
    text-align: center;
  }
  .son {
    background: pink;
    display: inline-block;
  }
</style>

<table>
  <tr>
    <td class="father">
      <div class="son size">我是子盒子</div>
    </td>
  </tr>
</table>

writing-mode

writing-mode 是 CSS 中的一个属性，用于定义文本的书写模式。它的常见取值包括：

• horizontal-tb ：这是默认值，文本从左到右水平排列，行从上到下垂直排列。
• vertical-rl ：文本从上到下垂直排列，从右向左阅读。
• vertical-lr ：文本从上到下垂直排列，从左向右阅读。

用这种方式实现水平垂直居中较为复杂，不推荐使用：

<style>
  .father {
    border: 1px solid red;
    width: 300px;
    height: 300px;

    writing-mode: vertical-lr;
    text-align: center;
  }
  .son-inner {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
  }
  .son {
    background: pink;

    display: inline-block;
    margin: auto;
    text-align: left;
  }
</style>

<div class="father">
  <div class="son-inner">
    <div class="son">我是子盒子</div>
  </div>
</div>

总结

本文通过两个场景阐释了9个水平垂直居中的方式，不知道你最喜欢哪一种呢？我最喜欢用的是flex，简单优雅，哈哈哈哈，不管怎么样，适合实际场景的最重要。