您现在的位置是:首页 > 技术杂文前端杂文

CSS盒子水平居中的六种方法

阿龙2021-11-30【前端杂文】人已围观

方法一:定位居中
.child{
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}
方法二:margin居中
.child{
position:absolute;
margin:auto;
top:0;
left:0;
right:0;
bottom:0;
}
方法三:display:flex
.child{
display:flex;
justify-content:center;
align-items:center;
}
方法四:减去自身宽高各一半
//比如父宽高各200px
.child{
position:absolute;
width: 50px;
height: 50px;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px;
}
方法五:transform
.child{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
方法六:calc计算
//比如:父元素宽高各200px
//calc计算公式:父高宽-子元素宽高/2 = 75
.child {
            position: absolute;
            width: 50px;
            height: 50px;
            top: calc(75px);  
            left: calc(75px);
        }
 

Tags:水平居中

很赞哦! ()

上一篇:PHP制作API接口

下一篇:JS倒计时弹窗