在 JavaScript 中，使用元素的 offsetWidth 和 offsetHeight 属性可以分别获取元素的包含边框的宽度和高度；而 clientWidth 和 clientHeight 属性则可以分别获取元素的不包含边框的宽度和高度。
图 1：元素在视窗中居中显示
这些属性值包含的内容如下：
- offsetWidth=左、右边框宽度+内容宽度+左、右内边距
- offsetHeight=上、下边框宽度+内容高度+上、下内边距
- clientWidth=内容宽度+左、右内边距
- clientHeight=内容高度+上、下内边距
在实际应用中，经常需要让一个元素在视窗中居中显示，此时需要确定元素的定位 left 和 top 属性值，这两个值可使用下面的公式来确定：
元素的 left=（可视区域宽-元素的宽）/2
元素的 top=（可视区域高-元素的高）/2
其中，可视区域宽和高又可以使用以下格式的代码来获取：
可视区域宽度=document.documentElement.clientWidth
可视区域高度=document.documentElement.clientHeight
元素在一个视窗中居中显示的具体代码请参见例 1。
【例 1】设置元素在视窗中居中显示。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置元素在视窗中居中显示</title>
<style>
#div1{width:100px;height:100px;background:red;border:10px solid #00BFFF;
position:absolute;}
</style>
<body>
<div id="div1">
<script>
var oDiv = document.getElementById('div1');
var clientW = document.documentElement.clientWidth;
var clientH = document.documentElement.clientHeight;
var divW = oDiv.offsetWidth;
var divH = oDiv.offsetHeight;
oDiv.style.left = (clientW-divW)/2+'px';
oDiv.style.top = (clientH-divH)/2+'px';
</script>
</body>
</html>
上述代码在 Chrome 浏览器中的运行结果如图 1 所示。
图 1：元素在视窗中居中显示
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/24020.html