CSS盒子在页面居中的三种方法

前两种方法都是通过CSS样式来做到的，第三种是通过JS实现的第一种方法：IE8以下不兼容　 div { width: 100px; height: 100px; background: red;...

前两种方法都是通过CSS样式来做到的，第三种是通过JS实现的

第一种方法：IE8以下不兼容　

div {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

第二种方法：兼容IE11,10、9、8、7、5（亲测）

左右都为50%的边距，最后要减去自身的宽高的一半，所以margin-left 和 margin-top为负数

 1 div {
 2             width: 100px;
 3             height: 100px;
 4             background: red;
 5             position: absolute;
 6             top: 50%;
 7             left: 50%;
 8             margin-top: -50px;
 9             margin-left: -50px;
10     }

第三种方法

　　var$div = document.querySelector('div');
function Center( ev) {
ev = ev || window. event;
//获取盒子宽度
var $div_width = $div. offsetWidth;
//获取盒子高度
var $div_height = $div. offsetHeight;
//获取window 高度
var Height = window. innerHeight;
//获取window 宽度
var Width = window. innerWidth;
console. log( Width);
//计算盒子距离顶部的距离
var top = ( Height - $div_height)/ 2
//计算盒子距离左边的距离
var left = ( Width - $div_width) / 2
$div. style. top = top + 'px';
$div. style. left = left + 'px';
console. log( Height);
}
Center();

div {
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。

发表于 2021-07-07 14:03
阅读 ( 955 )
分类：WEB前端开发

CSS盒子在页面居中的三种方法

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »