假设我有一个<div>,我希望它位于浏览器显示(视口)的中央。为此,我需要计算<div>元素的宽度和高度。

我应该用什么?请包括浏览器兼容性信息。


当前回答

你只需要为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返回0,你可以获取元素的样式宽度属性并搜索一个数字。100px -> 100

/ \ d * / .exec (MyElement.style.width)

你只需要为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>居中,并将其收缩到其内容的大小。

注:这个答案写于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和. offsetheight属性。 注意它们属于元素,而不是.style。

var width = document.getElementById('foo').offsetWidth;

. getboundingclientrect()函数的作用是:在执行CSS转换后,以浮点数的形式返回元素的尺寸和位置。

> console.log(document.getElementById('foo').getBoundingClientRect())
DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,​
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}

元素。offsetWidth和元素。offsetHeight应该这样做,就像在之前的帖子中建议的那样。

但是,如果您只想集中内容,还有更好的方法。假设您使用严格的xhtml DOCTYPE。设置body标签的margin:0,auto属性和所需宽度(px)。内容与页面居中对齐。