Question

我不知道，也不可能知道我需要居中的绝对div的宽度。它必须绝对定位，因为它与其他元素重叠（z-index trickery）。这是我的基本结构

<div style='position:relative'>
    <div></div>
    <div style='position:absolute'>...</div>
</div>

第一个子div并非绝对定位，以便将其高度和宽度借给父级。第二个div必须与其兄弟姐妹重叠并水平居中。

上述结构只是我两难的例证，实际上父母div会有很多孩子，并不是所有孩子都是div，他们的维度都不会被人知道。

谢谢，我现在要睡觉了......

Answer 1

好吧，我不认为只使用CSS是可行的，因为以一个绝对div居中，你总是需要设置宽度才能使用 - ＆gt; “left：50％; margin-left：[width / 2] px;”。

无论如何，你可以使用一些javascript / jQuery代码来获取你的div的宽度然后dinamicaly设置CSS宽度属性。

请阅读以下内容： http://api.jquery.com/width/ http://api.jquery.com/css/#css2

Answer 2

这样做的方法包括少量的js，虽然不多。虽然我首先要通过css：

首先你需要添加：

left: 50%;

这会使左侧的div结束到页面的一半。然后给它一个类，以便我们可以在javascript中引用它，例如：

<div style='position:relative'>
    <div class='center-absolute'>Content</div>
</div>

这样我们可以在css和js中引用它。我们使用一个类，因为你只应该为一个元素使用id。

以下是.center-absolute所需的css：

.center-absolute {
    position: absolute;
    left: 50%;
}

然后是js。由于可能有多个元素，我们需要一个for循环在每个元素之间进行迭代：

var $centerAbsolute = document.getElementsByClassName('center-absolute');
for (i = 0; i < $centerAbsolute.length; i++) {
    $centerAbsolute[i].style.marginLeft = $centerAbsolute[i].offsetWidth / 2 * -1 + 'px';
}

这会迭代所有带有center-absolute类的元素，并给它们留下一个边距，该边距是以其为中心的元素宽度的一半。

这是一个有效的小提琴演示：

http://jsfiddle.net/Hive7/FqJ7T/

Answer 3

虽然不推荐使用，<div align="center">应该可以使用。

将具有不固定宽度的绝对定位div居中

3 个答案: