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

i use below css to center my div with absolute position:

我使用下面的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*/
}

It works like magic. But as you can notice, it has fixed width and height.

它就像魔法一样。但是你可以注意到,它有固定的宽度和高度。

Now i have to use this same css but for my div which has no fixed width and height, as it uses responsive layouts.

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

I just want to know is there any simplest way to set my div width dynamically in css by javascript or so? i.e., it count my div width on page load and than set to a negative number 1/2 of your it in margin-left?

我只是想知道有没有最简单的方法来通过javascript左右动态设置我的div宽度?也就是说,它在页面加载时计算我的div宽度,然后在margin-left中设置为它的负数1/2?

4 个解决方案

#1

You can center a fixed or absolute positioned element setting right and left to 0, and then margin-left & margin-right to auto as if you were centering a static positioned element.

您可以将固定或绝对定位的元素设置左右中心设置为0,然后将左边距和右边距右边设置为自动,就像您将静态定位元素居中一样。

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

See this example working on this fiddle.

#2

use to

display table-cell

as like this

像这样

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

I also had this problem trying to center captions of varying lengths in a slideshow.

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

To center an absolute positioned element that has a dynamic width you can use transform: translateX. With prefixes this works in most modern browsers. Like so:

要使具有动态宽度的绝对定位元素居中,您可以使用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

Assign a class to all the divs that you want positioned like that, and then just select all of them and do the calculations.

将类分配给您想要定位的所有div,然后只选择所有div并进行计算。

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

Though, beware that this is a bad way of doing things, mainly because it's slow, your containers are not flexible and if you don't wait for the centering you may have flashes of unformatted content.

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