我是石家庄做网站的一名前端工程师,今天我给大家分享的是css中让元素居中的四种方法。希望这篇文章对大家能有所帮助。
第一种方法:
div.box{
weight:200px;
height:400px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-200px;
}
有点是兼容性好;缺点是必须知道元素的宽高
-------------
第二种方法:
div.box{
weight:200px;
height:400px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
不用知道元素的宽高;缺点是兼容性不好,只支持IE9+的浏览器
---------------
第三种方法
div.box{
weight:200px;
height:400px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
优点是兼容性较好,缺点是不支持IE7以下的浏览器
---------------
第四种方法
div{
display:flex;
justify -content:center;
align-items:center;
}
以上就是石家庄做网站的尚武科技π为大家分享的CSS3让元素居中的四种方法
希望对各位小伙伴有所帮助。
如果大家对有什么技术方面的问题,可以关注石家庄做网站的尚武科技官方公众号“尚武科技π”,其中会有大量关于”互联网+”的相关的内容供大家互相学习了解,同时欢迎大家一起讨论技术问题。
通过以上内容的说明,大家对CSS3让元素居中的四种方法已经有了一定的了解。如果大家还有什么问题可以在尚武科技π留言,我们会在下期的文章更新中为您解答您的问题。
希望石家庄做网站的尚武科技做网站做的越来越好。
如果大家觉得尚武科技π写的文章对大家有用的话别忘了分享给朋友,万分感谢大家对尚武科技π的支持。
码字不易,且看且珍惜......