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