声明：以下内容为个人学习总结，初衷是方便自己学习复习记录。如有错误之处，烦请多多指正！
实现效果（让绿色盒子（子盒子）显示在红色盒子（父盒子）的中间）：
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>
