如何实现让子盒子在父盒子里面水平垂直居中对齐

第一步:html骨架里面设大盒子类名为father ,小盒子类名为son ,大盒子嵌套小盒子

第二步:写css样式 (有三种方法可以使小盒子水平垂直居中对齐)

<div class="father"><div class="son"></div></div>

方法一:

父盒子相对定位,子盒子绝对定位,使用margin:auto;

.father{width:200px;height:200px;background-color:orange;position:relative;}.son{width:100px;height:100px;background-color:skyblue;position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;}

方法二:

父盒子相对定位,子盒子绝对定位,使用位移;

.father{width:200px;height:200px;background-color:orange;position:relative;}.son{width:100px;height:100px;background-color:skyblue;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)

前两种方法是可以在不知道父盒子的宽高情况下,可以使子盒子垂直居中的.

方法三:

父盒子相对定位,子盒子绝对定位,使用margin+方位名词:反向移动自身宽高的一半;

.father{width:200px;height:200px;background-color:orange;position:relative;}.son{width:100px;height:100px;background-color:skyblue;position:absolute;left:50%;top:50%;margin-left:-50px;margin-top:-50px;