假设我有一个<div>,我希望它位于浏览器显示(视口)的中央。为此,我需要计算<div>元素的宽度和高度。
我应该用什么?请包括浏览器兼容性信息。
假设我有一个<div>,我希望它位于浏览器显示(视口)的中央。为此,我需要计算<div>元素的宽度和高度。
我应该用什么?请包括浏览器兼容性信息。
当前回答
... 看起来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>
其他回答
以防它对任何人都有用,我把一个文本框,按钮和div都用相同的css:
width:200px;
height:20px;
border:solid 1px #000;
padding:2px;
<input id="t" type="text" />
<input id="b" type="button" />
<div id="d"></div>
我尝试了它在chrome, firefox和ie-edge,我尝试了jquery和没有,我尝试了它有和没有box-sizing:border-box。总是用<!DOCTYPE html >
结果:
Firefox Chrome IE-Edge
with w/o with w/o with w/o box-sizing
$("#t").width() 194 200 194 200 194 200
$("#b").width() 194 194 194 194 194 194
$("#d").width() 194 200 194 200 194 200
$("#t").outerWidth() 200 206 200 206 200 206
$("#b").outerWidth() 200 200 200 200 200 200
$("#d").outerWidth() 200 206 200 206 200 206
$("#t").innerWidth() 198 204 198 204 198 204
$("#b").innerWidth() 198 198 198 198 198 198
$("#d").innerWidth() 198 204 198 204 198 204
$("#t").css('width') 200px 200px 200px 200px 200px 200px
$("#b").css('width') 200px 200px 200px 200px 200px 200px
$("#d").css('width') 200px 200px 200px 200px 200px 200px
$("#t").css('border-left-width') 1px 1px 1px 1px 1px 1px
$("#b").css('border-left-width') 1px 1px 1px 1px 1px 1px
$("#d").css('border-left-width') 1px 1px 1px 1px 1px 1px
$("#t").css('padding-left') 2px 2px 2px 2px 2px 2px
$("#b").css('padding-left') 2px 2px 2px 2px 2px 2px
$("#d").css('padding-left') 2px 2px 2px 2px 2px 2px
document.getElementById("t").getBoundingClientRect().width 200 206 200 206 200 206
document.getElementById("b").getBoundingClientRect().width 200 200 200 200 200 200
document.getElementById("d").getBoundingClientRect().width 200 206 200 206 200 206
document.getElementById("t").offsetWidth 200 206 200 206 200 206
document.getElementById("b").offsetWidth 200 200 200 200 200 200
document.getElementById("d").offsetWidth 200 206 200 206 200 206
这是唯一对我有效的方法:
element.clientWidth -
parseFloat(window.getComputedStyle(element, null).getPropertyValue("padding-left")) -
parseFloat(window.getComputedStyle(element, null).getPropertyValue("padding-right"))
元素。offsetWidth和元素。offsetHeight应该这样做,就像在之前的帖子中建议的那样。
但是,如果您只想集中内容,还有更好的方法。假设您使用严格的xhtml DOCTYPE。设置body标签的margin:0,auto属性和所需宽度(px)。内容与页面居中对齐。
根据MDN:确定元素的尺寸
offsetWidth和offsetHeight返回“一个元素占用的空间总量,包括可见内容的宽度、滚动条(如果有的话)、填充和边框”
clientWidth和clienttheight返回“实际显示内容占用的空间大小,包括填充,但不包括边框、页边距或滚动条”
scrollWidth和scrollHeight返回“内容的实际大小,不管当前有多少可见”
因此,这取决于所测量的内容是否预计在当前可视区域之外。
看一下Element.getBoundingClientRect()。
这个方法将返回一个包含宽度、高度和其他一些有用值的对象:
{
width: 960,
height: 71,
top: 603,
bottom: 674,
left: 360,
right: 1320
}
例如:
var element = document.getElementById('foo');
var positionInfo = element.getBoundingClientRect();
var height = positionInfo.height;
var width = positionInfo.width;
我相信这没有.offsetWidth和.offsetHeight的问题,它们有时返回0(如在这里的评论中讨论的那样)
另一个区别是getBoundingClientRect()可能返回分数像素,其中. offsetwidth和. offsetheight将四舍五入到最近的整数。
注意:getBoundingClientRect在IE8及以下不返回高度和宽度
如果你必须支持IE8,使用.offsetWidth和.offsetHeight:
var height = element.offsetHeight;
var width = element.offsetWidth;
值得注意的是,该方法返回的对象并不是真正的普通对象。它的属性是不可枚举的(例如,Object。钥匙不能开箱即用。)
更多信息请点击这里: 如何最好地将一个ClientRect / DomRect转换为一个普通对象
参考:
.offsetHeight: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight .offsetWidth: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth .getBoundingClientRect (): https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect