以不固定宽度居中绝对定位的 div答案

【问题标题】：Center an absolute positioned div with an unfixed width以不固定宽度居中绝对定位的 div
【发布时间】：2011-03-10 11:37:50
【问题描述】：

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

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

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

上面的结构只是说明我的困境，实际上父div会有很多孩子，并不是所有的都是div，它们的尺寸都不知道。

谢谢，我要睡觉了……

【问题讨论】：

您可以将它放在垂直居中的父元素中，然后根据情况对其（子元素）应用 margin: 0 auto;。

标签： html css layout center absolute

【解决方案1】：

这样做的方法将包括少量的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/

【讨论】：

【解决方案2】：

好吧，我认为仅使用 CSS 是不可能的，因为要使绝对 div 居中，您总是需要设置宽度才能使用 -> "left: 50%; margin-left: [宽度/2]px;".

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

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

【讨论】：

【解决方案3】：

虽然这已被弃用，但<div align="center"> 应该可以工作。

【讨论】：

这会将内容集中在 div 中，而不是 div 本身。