块级元素水平垂直居中
1、给父元素设置相对定位
给子元素设置绝对定位
给子元素设置left,right,top,bottom都为0px;
给子元素设置margin:auto;
2、给父元素设置绝对定位
给子元素设置绝对定位
给子元素设置top=calc(50% - 子元素高度的一半)
left=calc(50% - 子元素宽度的一半)
3、给父元素设置绝对定位
给子元素设置绝对定位
给子元素设置left、top为父元素的50%
给子元素设置margin-top、margin-left为子元素宽高的一半
4、给父元素设置display:flex;
justify-content:center;
align-items:center;
5、给父元素设置display:flex;
给子元素设置margin:auto;
注:这种方法只适用于父元素只有一个子元素。
html代码:
<div class="father">
<div class="son"> </div>
</div>
CSS代码:
*{
margin:0px;
padding: 0px;
}
html,body,.father{
width: 100%;
height: 100%;
}
.father{
background-color: teal;
}
.son{
width: 300px;
height: 300px;
background-color: pink;
}
/*方法一*/
/*.fahter{
position: relative;
}
.son{
position: absolute;
top:0px;
right: 0px;
bottom: 0px;
left: 0px;
margin:auto;
}*/
/*方法二*/
/*.father{
position: relative;
}
.son{
position: absolute;
top:50% ;
left:50%;
margin-top: -150px;
margin-left: -150px;*/
/*方法三*/
/*.father{
position: relative;
}
.son{
position: absolute;
top:calc(50% - 150px);
left:calc(50% - 150px);
}*/
/*方法四*/
/*.father{
display: flex;
justify-content: center;
align-items: center;
}*/
/*方法五:父元素只有一个子元素*/
.father{
display: flex;
}
.son{
margin:auto;
}
```
***********以上就是css中块级元素的垂直水平居中的相关介绍,有更好的欢迎留言!*******