我想在窗口的中心放置一个div(with position:absolute;)元素。但我在这样做时遇到了问题,因为宽度未知。

我尝试了以下CSS代码,但它需要调整,因为宽度是响应的。

.center {
  left: 50%;
  bottom: 5px;
}

我怎样才能做到这一点?


当前回答

我只是想补充一句,如果有人想用一个div标记来完成,那么这里是解决方法:

宽度为900px。

#styleName {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

在这种情况下,应该事先知道宽度。

其他回答

这是对我们有用的其他答案的混合:

.el {
   position: absolute;
   top: 50%;
   margin: auto;
   transform: translate(-50%, -50%);
}

HTML格式:

<div class="wrapper">
    <div class="inner">
        content
    </div>
</div>

CSS:

.wrapper {
    position: relative;

    width: 200px;
    height: 200px;

    background: #ddd;
}

.inner {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    margin: auto;

    width: 100px;
    height: 100px;

    background: #ccc;
}

这里还有更多的例子。

我只是想补充一句,如果有人想用一个div标记来完成,那么这里是解决方法:

宽度为900px。

#styleName {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

在这种情况下,应该事先知道宽度。

Sass/Compass版本的先前响应解决方案:

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}

一个简单的方法,对我来说,可以将一个未知宽度的块水平居中:

<div id="wrapper">
  <div id="block"></div>
</div>

#wrapper {
    position: absolute;
    width: 100%;
    text-align: center;
}

#block {
    display: inline-block;
}

文本对齐属性可以添加到#block规则集,以独立于块的对齐方式对齐其内容。

这在Firefox、Chrome、Internet Explorer、Edge和Safari的最新版本上有效。