假设<div>我希望在浏览器的显示（视口）中居中。为此，我需要计算<div>元素的宽度和高度。
我应该使用什么？请提供有关浏览器兼容性的信息。
如何检索HTML元素的实际宽度和高度？
第425篇《如何检索HTML元素的实际宽度和高度？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共8个回答
您也可以使用以下代码：
var divID = document.getElementById("divid");
var h = divID.style.pixelHeight;
正如上一篇文章中所建议的那样，应该执行element.offsetWidth和element.offsetHeight。
但是，如果只想使内容居中，则有更好的方法。假设您使用xhtml严格DOCTYPE。设置body标签的margin：0，auto属性和所需的宽度（以px为单位）。内容与页面居中对齐。
...似乎CSS帮助将div放在中心位置...
<style>
.monitor {
position:fixed;/* ... absolute possible if on :root */
top:0;bottom:0;right:0;left:0;
visibility:hidden;
}
.wrapper {
width:200px;/* this is size range */
height:100px;
position:absolute;
left:50%;top:50%;
visibility:hidden;
}
.content {
position:absolute;
width: 100%;height:100%;
left:-50%;top:-50%;
visibility:visible;
}
</style>
<div class="monitor">
<div class="wrapper">
<div class="content">
... so you hav div 200px*100px on center ...
</div>
</div>
</div>
如果需要将其居中在浏览器的显示端口中；您只能使用CSS来实现
yourSelector {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
您只需要为IE7和更早的版本（仅在您的内容没有固定大小的情况下）进行计算即可。我建议使用HTML条件注释，以将骇客行为限制为不支持CSS2的旧IE。对于所有其他浏览器，请使用以下命令：
<style type="text/css">
html,body {display:table; height:100%;width:100%;margin:0;padding:0;}
body {display:table-cell; vertical-align:middle;}
div {display:table; margin:0 auto; background:red;}
</style>
<body><div>test<br>test</div></body>
这是完美的解决方案。它可以居中放置<div>任何大小的内容，并将其收缩包装到其内容的大小。
offsetWidth并offsetHeight返回“元素占用的总空间量，包括可见内容的宽度，滚动条（如果有），填充和边框”
clientWidth并clientHeight返回“实际显示的内容占用了多少空间，包括填充，但不包括边框，边距或滚动条”
scrollWidth并scrollHeight返回“内容的实际大小，无论当前可见多少内容”
因此，这取决于所测量的内容是否期望超出当前可见区域。
注意：此答案写于2008年。当时，对于大多数人来说，最好的跨浏览器解决方案实际上是使用jQuery。我为后代保留答案，如果您使用的是jQuery，这是一种很好的方法。如果您使用的是其他框架或纯JavaScript，那么可能会采用可接受的答案。
在jQuery 1.2.6中，你可以使用的核心一个CSS功能，height和width（或outerHeight和outerWidth，如适用）。
var height = $("#myDiv").height();
var width = $("#myDiv").width();
var docHeight = $(document).height();
var docWidth = $(document).width();
相似问题
问题类别
如果offsetWidth返回0，则可以获取元素的style width属性，并在其中搜索数字。“ 100px”-> 100
/\d*/.exec(MyElement.style.width）