当面试官问你使内容水平垂直居中的方式有哪些时，你可以回答出几种？如何说出加分项的答案？

前言

内容水平垂直居中是我们在页面布局中经常会遇到的问题，同时这也是css面试中最经典的问题，包括使用CSS属性position、flex、grid、table、margin 去实现。

1. 使用 position: absolute + translate 或 margin 负值（已知宽高）

这是一种最常见的水平垂直居中方法。通过将容器的position属性设置为absolute，再利用left和top属性与transform: translate(-50%, -50%)或负值的margin实现水平垂直居中。注意，第二种方法需要明确指定容器的宽度和高度，适用于已知宽高的元素。

<div class="container">
  <div class="centered">Hello, World!</div>
</div>

<style>
/* 不知宽高 */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} 

/* 已知宽高 */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -75px;  /* 移动左宽度和上高度的一半 */
    width: 150px;
    height: 100px;
    background-color: yellow;
}     
</style>

在将一个元素水平垂直居中时，我们通将它的left和top属性设置为50%，transform: translate(-50%, -50%)是CSS3中的一个变换函数，用于移动元素的位置。其中-50%表示元素自身宽度或高度的50%，即让元素向左和向上移动自身宽度和高度的一半，从而实现水平垂直居中的效果。该方法的好处在于不需要知道元素的宽度和高度，可以适用于不确定宽高的情况，也是最常用的方法。

不知宽高效果图：

已知宽高效果图：

2. 使用 flex 布局

使用CSS3中的flex布局可以非常方便地实现水平垂直居中。使用display: flex将父容器设置为弹性盒子容器，再使用justify-content: center;和align-items: center;让子元素分别在x轴和y轴居中，即实现水平垂直居中。

<div class="container">
  <div class="centered">Hello, World!</div>
</div>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 1px solid #ccc;
}
.centered {
  width: 150px;
  height: 100px;
  background-color: yellow;
}
</style>

效果图：

3. 使用 grid 布局

使用CSS3中的grid布局也可以非常方便地实现水平垂直居中。使用display: grid将父容器设置为网格容器，再使用place-items: center;让子元素水平垂直居中。注意，place-items: center;只适用于网格布局容器。它是align-items和justify-items属性的简写形式，可以同时设置水平和垂直方向上的对齐方式为居中。

<div class="container">
  <div class="centered">Hello, World!</div>
</div>

<style>
.container {
    display: grid;
    place-items: center;
    /* justify-content: center; */
    /* align-items: center; */
    height: 200px;
    border: 1px solid #ccc;
}
.centered {
  width: 150px;
  height: 100px;
}
</style>

效果图：

4. 使用 table 属性

使用table属性也可以实现水平垂直居中。使用display: table将父容器设置为表格容器，再将子元素设置为表单元格display: table-cell。注意，在表格布局中，vertical-align: middle;属性只对表格单元格元素（display: table-cell）生效。它用于控制表格单元格内部内容的垂直对齐方式。而text-align: center;属性则用于控制容器内部内容的水平对齐方式。

<div class="container">
    <div>
        Hello, World!
    </div>
    <div>
        Hello, World!
    </div>
</div>

<style>
.container {
    display: table;
    /* 将父容器为表格 */
    width: 100%;
    height: 300px;
    border: 1px solid #ccc;
}

.container div {
    display: table-cell;
    /* 将子容器设置为表格单元格 */
    vertical-align: middle;
    /* 垂直居中 */
    text-align: center;
    /* 水平居中 */
}
</style>

效果图：

5. 使用 margin （已知宽高）

使用CSS的margin属性也可以实现水平垂直居中。通过计算父容器与子容器的宽高得出可将子元素水平垂直居中的margin的值，水平和垂直方向同时为宽度和高度的一半，就可以让子元素水平垂直居中。

<div class="container">
  <div class="centered">Hello, World!</div>
</div>

<style>
.container {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
}
.centered {
    width: 150px;
    height: 100px;
    background-color: yellow;
    margin-left: 75px;
    /* 左右宽度:(300 - 150 )/ 2 = 75 */
    margin-top: 50px;
    /* 上下宽度:(200 - 100 )/ 2 = 50 */
}
</style>

效果图：

总结

对于position: absolute + translate 和 flex 这俩种水平垂直居中的方法，相信大家是非常的熟悉，也是大家最常用的方法，而使用 margin （已知宽高）这种方法也是最基础但却最捞的方法。grid 栅格布局也是可以实现的方法之一，但是对于使用 table 属性这点是非常少见的，也是面试中最难回答到的一点，少而显优，这便是加分项的答案。最后，即将面临春招，祝愿大家都能够旗开得胜，马到成功！

最后，如果这篇文章对您有所帮助，还希望大家多多点赞支持，如有错误也欢迎大家指正。