小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
前言
在日常的开发中，我们经常会面对这样一个问题：如何实现居中水平垂直居中对齐。这也是一道经典面试题，本文会对每一个方案进行详细的讲解和实现，让你轻松学习和理解~
1. flex
使用弹性盒子布局，只需要给待处理的块状元素的父元素添加属性：
/* 弹性盒子布局 */
display: flex;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;
该方案在实际开发中应用颇多，也比较简单直观，不需要确定子盒子宽高就可以实现。
实例代码，复制即可查看效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 300px;
width: 300px;
background-color: orangered;
/* 弹性盒子布局 */
display: flex;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;
}
.test-div {
height: 100px;
width: 100px;
background-color: blue;
}
</style>
</head>
<body>
<section class="box">
<div class="test-div"></div>
</section>
</body>
</html>
效果：
2. position (需要确定子元素宽高)
- 父元素设置为相对定位：
position: relative；子元素设置为绝对定位：position: absolute - 子元素设置top和left为50%：
top: 50%; left: 50%; - 子元素设置
margin-left和margin-top为自身宽高一半的负值：margin-left: -50px; margin-top: -50px;（自身宽高为height: 100px; width: 100px;）
实例代码，复制即可查看效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 300px;
width: 300px;
background-color: rgb(201, 211, 58);
/* 父盒子 相对定位 */
position: relative;
}
.test-div {
height: 100px;
width: 100px;
background-color: rgb(211, 18, 98);
/* 子盒子 绝对定位 */
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
</head>
<body>
<section class="box">
<div class="test-div"></div>
</section>
</body>
</html>
效果：
3. position + transform 元素平移
只需将上面例子中的：子元素设置margin-left和margin-top为自身宽高一半的负值
替换为：transform: translate(-50%,-50%);
即：
- 父元素设置为相对定位：
position: relative；子元素设置为绝对定位：position: absolute - 子元素设置top和left为50%：
top: 50%; left: 50%; - 子元素设置transform为 translate(-50%,-50%)：
transform: translate(-50%,-50%);
这个方法比较特殊，虽说只改了一行代码，但是原理是什么？只是背一行代码就会显得十分草率。
所以再放实例代码之前，我们先来看看这个方法如何实现了水平垂直居中。
transform: translate(x,y);的语法定义了元素的2D转换，也就是元素移动（平移），讲完这个我们再来看，子元素设置绝对定位，top和left各移动50%后，子元素左上角正好在父盒子的中心，此时还没有实现子元素的水平垂直居中（即子元素的中心点在父盒子的中心，而不是左上角在父盒子中心）。接着往下看：
translate(x,y) 括号里填百分比数据的话，会以本身的长宽做参考，注意，不是以父盒子宽高为参考，这就是该方法最需要理解的一个点。比如，本身的宽为100px，高为100px. 那填translate(50%,50%)就是向右和向下各移动50px，添加负号就是向着相反的方向移动。移动后的效果就是子元素的中心点在父元素的中心，实现了水平垂直居中。
实例代码，复制即可查看效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 300px;
width: 300px;
background-color: rgb(231, 69, 20);
/* 父盒子 相对定位 */
position: relative;
}
.test-div {
height: 100px;
width: 100px;
background-color: rgb(67, 33, 218);
/* 子盒子 绝对定位 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<section class="box">
<div class="test-div"></div>
</section>
</body>
</html>
效果：
4. position + margin：auto
- 父元素设置为相对定位：
position: relative；子元素设置为绝对定位：position: absolute - 子元素设置top、bottom、left和right为0：
top: 0; bottom: 0; left: 0; right: 0; - 子元素设置margin为auto：
margin: auto;
实例代码，复制即可查看效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 300px;
width: 300px;
background-color: rgb(74, 199, 43);
/* 父盒子 相对定位 */
position: relative;
}
.test-div {
height: 100px;
width: 100px;
background-color: rgb(20, 38, 117);
/* 子盒子 绝对定位 */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<section class="box">
<div class="test-div"></div>
</section>
</body>
</html>
效果：
