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

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倒计时弹窗