声明：以下内容为个人学习总结，初衷是方便自己学习复习记录。如有错误之处，烦请多多指正！
实现效果（让绿色盒子（子盒子）显示在红色盒子（父盒子）的中间）：
1.定位：子绝父相
总的来说，就是子盒子采用绝对定位，父盒子采用相对定位，再添加一点其它代码即可。
方法1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 800px;
height: 500px;
border: 1px solid red;
/* 父盒子相对定位，占据位置 */
position: relative;
}
.box2 {
width: 300px;
height: 150px;
border: 1px solid green;
/* 子盒子绝对定位，不占据位置 */
position: absolute;
/*子盒子相对于父盒子的宽和高移动50%（即移动宽和高为父盒子的50%） */
top: 50%;
left: 50%;
/* 再回退到自身盒子宽和高的一半（由于坐标原点在左上角，向右移动为正值，向左移动为负值，所以这里为负值） */
margin-left: -150px;
margin-top: -75px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
方法2：使用css3中的translate，不需计算子盒子的宽度和高度，因为移动的宽度和高度就是相对于自身的宽高计算的。
方法3：子盒子设置top、right、bottom、left为0，margin设置auto
2.flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 800px;
height: 500px;
border: 1px solid red;
/* flex布局默认主轴是 x 轴 row */
display: flex;
/* 设置子元素在主轴上居中对齐 */
justify-content: center;
/* 设置子元素在侧轴上居中对齐 */
align-items: center;
}
.box2 {
width: 300px;
height: 150px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>