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

第一步: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;