文章目录
十种方法实现水平垂直居中
效果:
这里:left:50%是相对于父元素的50%,并且是从左上角开始算的
这里:-margin是相对于子元素自身的
需要居中元素固定宽高的3种
法1:absolute配合负margin
法2:absolute配合上下左右0;margin auoto
法3:absolute配合calc(50% - 25px),注意calc空格
html
<div class='wp'>父亲
<div class='box'>儿子</div>
</div>
css
.wp{
border:1px solid red;
height:400px;
position:relative
}
.box{
border:1px solid green;
height:200px;
width:50px;
}
/* 法1:absolute配合负margin
.box{
position:absolute;
left:50%;
top:50%;
margin-left:-25px;
margin-top:-100px
} */
/* 法2:absolute配合上下左右0;margin auoto
.box{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto
} */
/* 法3:absolute配合calc(50% - 25px),注意calc空格
.box{
position:absolute;
top:calc(50% - 100px);
left:calc(50% - 25px)
} */
不用居中元素固定宽高的7种
- absolute+transform
- flex