假设我们不知道盒子的宽高
方法1：绝对定位 + transform中的translate。首先对子元素进行绝对定位，父元素进行相对定位，然后将子元素的左上角通过top:50%和left:50%定位到页面*，最后通过translate来调整子元素的中心点到页面的中心。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<style>
.father {
position: relative;
margin: auto;
width: 200px;
height: 200px;
border: 5px solid black;
}
.son {
position: absolute;
background-color: brown;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center; /*使得文字水平居中*/
line-height: 100%; /*使得行高和子元素的高度一致*/
vertical-align:middle; /*使得文字的垂直方向上居中，从而使文字整体水平居中*/
}
</style>
</head>
<body>
<div class="father">
<div class="son">son</div>
</div>
</body>
</html>
方法2 ：使用flex布局。首先在容器上通过display:flex开启flex布局，然后分别设置主轴上的项目居中排列justify-content:center和交叉轴上的项目居中排列align-items:center。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<style>
.father {
display: flex;
margin: auto;
width: 200px;
height: 200px;
border: 5px solid black;
justify-content: center;
align-items: center;
}
.son {
background-color: brown;
width: 50px;
height: 50px;
text-align: center; /*使得文字水平居中*/
line-height: 50px; /*使得行高和子元素的高度一致*/
vertical-align:middle; /*使得文字的垂直方向上居中，从而使文字整体水平居中*/
}
</style>
</head>
<body>
<div class="father">
<div class="son">son</div>
</div>
</body>
</html>
假设我们知道盒子有宽高
方法3：使用绝对定位+margin。首先对子元素绝对定位，对父元素相对定位，然后将子元素的top，bottom，left，right四个方向上的属性设置为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现子元素的水平和垂直方向上的居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<style>
.father {
position: relative;
margin: auto;
width: 200px;
height: 200px;
border: 5px solid black;
}
.son {
position: absolute;
background-color: brown;
width: 50px;
height: 50px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center; /*使得文字水平居中*/
line-height: 50px; /*使得行高和子元素的高度一致*/
vertical-align:middle; /*使得文字的垂直方向上居中，从而使文字整体水平居中*/
}
</style>
</head>
<body>
<div class="father">
<div class="son">son</div>
</div>
</body>
</html>
假设我们知道盒子的具体宽高
方法4：绝对定位+margin负值。首先对子元素绝对定位，父元素相对定位，然后将子元素的左上角通过top:50%和left:50%定位到页面*，最后通过margin负值来调整子元素的中心点到页面的中心。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<style>
.father {
position: relative;
width: 200px;
height: 200px;
border: 5px solid black;
}
.son {
position: absolute;
background-color: brown;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
margin-top: -25px; /*自身height的一半*/
margin-left: -25px; /*自身width的一半*/
text-align: center; /*使得文字水平居中*/
line-height: 50px; /*使得行高和子元素的高度一致*/
vertical-align:middle; /*使得文字的垂直方向上居中，从而使文字整体水平居中*/
}
</style>
</head>
<body>
<div class="father">
<div class="son">son</div>
</div>
</body>
</html>