Question

我使用下面的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左右动态设置我的div宽度？即，它在页面加载时计算我的div宽度，并在margin-left中设置为它的负数1/2？

Answer 1

您可以将fixed或absolute定位元素设置right和left置于0，然后margin-left＆amp; margin-right至auto，好像您将static定位元素居中一样。

#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。

Answer 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

Answer 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%);  }

Answer 4

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

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

但是，要注意这是一种糟糕的做事方式，主要是因为它很慢，你的容器不灵活，如果你不等待居中，你可能会闪现未格式化的内容。

以div为中心（绝对位置和宽度）

4 个答案:

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