您现在的位置是:首页 > 技术杂文前端杂文
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倒计时弹窗
随机图文
CSS盒子水平居中的六种方法
方法一:定位居中.child{position:absolute;top:50%;left:50%;margin-top:-50px;margin-left:-50px;}方法二:margin居中.child{position:absolute;margin:auto;top:0;left:0;riJS将24小时格式转换为12小时
var dt = new Date();var hours = dt.getHours(); // 以24小时格式给出值var minutes = dt.getMinutes() ;var finalTime = "Time - " + hours + ":" + minutes;//finalTime