如何将一个盒子显示在浏览器中间

最新推荐文章于 2024-06-17 00:11:16 发布

xia00bai

最新推荐文章于 2024-06-17 00:11:16 发布

阅读量2.5k

点赞数

文章标签： html

本文链接：https://blog.youkuaiyun.com/xia00bai/article/details/104563433

版权

本文介绍了如何使用CSS和JavaScript将一个盒子元素显示在浏览器的正中间。通过CSS的绝对定位结合margin: auto，以及JS的方法实现跨浏览器的居中效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何将一个盒子显示在浏览器的正中间

1、通过CSS来实现
1)
position: absolute; top:50%; left:50%; margin-left:-101px; margin-top:-101px;
2)
position:absolute; left:0; top:0; right:0; bottom:0; margin:auto;
2、通过JS来实现
<script type="text/javascript">
var winW = document.documentElement.clientWidth || document.body.clientWidth;
var winH = document.documentElement.clientHeight || document.body.clientHeight;
var box = document.getElementById("box"); var boxTop = document.getElementById("boxTop"); var boxW = box.offsetWidth;
var boxH = box.offsetHeight; box.style.position = "absolute";
box.style.left = (winW - boxW) / 2 + "px";
box.style.top = (winH - boxH) / 2 + "px";
</script>

说明

在普通文档流里，margin: auto; 的意思是设置元素的margin-top和margin-bottom为0。
设置了position: absolute; 的元素会变成块元素，并脱离普通文档流。而文档的其余部分照常渲染，元素像是不在原来的位置一样。
设置了top: 0; left: 0; bottom: 0; right: 0; 样式的块元素会让浏览器为它包裹一层新的盒子，因此这个元素会填满它相对父元素的内部空间，这个相对父元素可以是是body标签，或者是一个设置了position: relative; 样式的容器。
给元素设置了宽高以后，浏览器会阻止元素填满所有的空间，根据margin: auto; 的要求，重新计算，并包裹一层新的盒子。
既然块元素是绝对定位的，又脱离了普通文档流，因此浏览器在包裹盒子之前会给margin-top和margi-bottom设置一个相等的值。使用“完全居中”，有意遵照了标准margin: auto; 样式渲染的规定，所以应当在与标准兼容的各种浏览器中起作用。