将 div 居中（绝对位置和宽度）答案

【问题标题】：center a div (absolute position and width)将 div 居中（绝对位置和宽度）
【发布时间】：2013-05-02 15:07:10
【问题描述】：

我使用下面的 css 以绝对位置居中我的 div：

#mydiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width: 121px;
    height: 121px;
    margin-top: -60.5px; /*set to a negative number 1/2 of your height*/
    margin-left: -60.5px; /*set to a negative number 1/2 of your width*/
}

它就像魔术一样工作。但是你可以注意到，它有固定的宽度和高度。

现在我必须使用相同的 css，但我的 div 没有固定的宽度和高度，因为它使用响应式布局。

我只是想知道有没有最简单的方法可以通过 javascript 在 css 中动态设置我的 div 宽度？即，它在页面加载时计算我的 div 宽度，然后在左边距中设置为负数 1/2？

【问题讨论】：

你不能用 % 而不是 px 来指定宽度和高度吗？
使用 JavaScript 计算元素的尺寸并相应地修改 margin-left/top 很可能需要在每次调整浏览器大小或用户旋转他们的手持设备时重新计算。

标签： javascript css html center

【解决方案1】：

您可以将fixed 或absolute 定位元素设置right 和left 居中到0，然后将margin-left 和margin-right 居中到auto，就好像您将@987654331 居中一样@定位元素。

#example {
    position: absolute;
    /* center the element */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    min-height: 10em;
    width: 90%;
}

请参阅此示例工作 on this fiddle。

【讨论】：

如果我的 div 上没有设置宽度怎么办；它适合内容大小。这不再有效。
是的，您需要设置一个width 才能使其正常工作。 the width property initializes to auto 和带有width: auto 的绝对定位元素将调整它们的宽度以适应内容大小。如果内容的宽度未知也无法知道，也许您应该重新考虑设置标记样式的方式或在 SO 中提出另一个问题。 OP 询问如何将 绝对定位的元素居中，并设置宽度。

【解决方案2】：

用于

display table-cell

像这样

CSS

.parent{
    display:table-cell;
    width:400px;
    text-align:center;
    border:solid 1px red;
    vertical-align:middle;
    height:400px;

}
.child{

    display:inline-block;
    background:green;
}

HTML

    <div class="parent">

    <div class="child">i m child div</div>

</div>

Demo

【讨论】：

这似乎太冗长了，不需要这个额外的标记。请看我的回答。

【解决方案3】：

我在尝试将不同长度的字幕放在幻灯片中时也遇到了这个问题。

要将具有动态宽度的绝对定位元素居中，您可以使用 transform: translateX.使用前缀，这适用于大多数现代浏览器。像这样：

div {
  width: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);  }

【讨论】：

【解决方案4】：

为您想要这样定位的所有 div 分配一个类，然后只需选择所有这些 div 并进行计算。

$("body").find(".center").each(function() {
    $(this).css({
        "margin-left": "-" + ( $(this).width()/2 ) + "px",
        "margin-top": "-" + ( $(this).height()/2 ) + "px"
    });
});

但请注意，这是一种不好的处理方式，主要是因为它速度慢，您的容器不灵活，如果您不等待居中，您可能会出现未格式化的内容。

【讨论】：