您现在的位置是:首页 > IT分类 > html+js网站首页html+jsCSS盒子水平居中的六种方法

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

  • 蓝天
  • html+js
  • 2020-03-31 14:17:09
简介 方法一:定位居中.child{position:absolute;top:50%;left:50%;margin-top:-50px;margin-left:-50px;} 方法二:margin居中.child{position:absolute;margin:auto;top:0;left:
  • 方法一:定位居中

.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);
        }
blK蓝天个人博客-一个自学的好博客
总结:方法一、方法二、方法五比较灵活,不需要提前知晓自身宽高,比较常用。而方法三也很好用,只是兼容不是太好,方法四和方法六则需要提前知道宽高才能计算出来,不灵活,基本用不上。

转载: 感谢您对蓝天个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源蓝天个人博客 http://www.along168.cn”。

文章评论

联系方式