2

我使用下面的 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？

4

4 回答 4

7

您可以将一个fixed或absolute定位的元素设置right和leftto居中0，然后margin-left& margin-righttoauto就好像您将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%;
}

请参阅使用此小提琴的此示例。

于 2013-06-12T16:17:00.667 回答
1

用来

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>

演示

于 2013-05-08T12:02:19.457 回答
0

我也有这个问题试图在幻灯片中居中不同长度的标题。

要使具有动态宽度的绝对定位元素居中，您可以使用 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%);  }
于 2015-10-07T16:54:45.240 回答
-1

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

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

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

于 2013-05-08T11:53:17.753 回答