前言
内容水平垂直居中是我们在页面布局中经常会遇到的问题，同时这也是css面试中最经典的问题，包括使用CSS属性position、flex、grid、table、margin 去实现。
1. 使用 position: absolute + translate 或 margin 负值（已知宽高）
这是一种最常见的水平垂直居中方法。通过将容器的position属性设置为absolute，再利用left和top属性与transform: translate(-50%, -50%)或负值的margin实现水平垂直居中。注意，第二种方法需要明确指定容器的宽度和高度，适用于已知宽高的元素。
html
<div class="container">
<div class="centered">Hello, World!</div>
</div>
css
<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轴居中，即实现水平垂直居中。
html
<div class="container">
<div class="centered">Hello, World!</div>
</div>
css
<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属性的简写形式，可以同时设置水平和垂直方向上的对齐方式为居中。
html
<div class="container">
<div class="centered">Hello, World!</div>
</div>
css
<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;属性则用于控制容器内部内容的水平对齐方式。
html
<div class="container">
<div>
Hello, World!
</div>
<div>
Hello, World!
</div>
</div>
css
<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的值，水平和垂直方向同时为宽度和高度的一半，就可以让子元素水平垂直居中。
html
<div class="container">
<div class="centered">Hello, World!</div>
</div>
css
<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 属性这点是非常少见的，也是面试中最难回答到的一点，少而显优，这便是加分项的答案。最后，即将面临春招，祝愿大家都能够旗开得胜，马到成功！
最后，如果这篇文章对您有所帮助，还希望大家多多点赞支持，如有错误也欢迎大家指正。