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

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

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

我怎样才能做到这一点?


当前回答

<div style='position:绝对;左:50%;顶部:50%;转换:转换(-50%,-50%)'>此文本居中。</div>

这将使div中的所有对象居中,位置类型为static或relative。

其他回答

据我所知,对于未知的宽度,这是不可能实现的。

如果这在您的场景中有效,您可以绝对定位一个100%宽度和高度的不可见元素,并使用margin:auto和可能的垂直对齐将元素居中。否则,您将需要JavaScript来执行此操作。

这适用于垂直和水平:

#myContent{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

如果要使父对象成为元素中心,请设置父对象的相对位置:

#parentElement{
    position: relative
}

对于垂直居中对齐,请设置元素的高度。感谢劳尔。如果要使父对象成为元素中心,请将父对象的位置设置为相对位置

#container
{
  position: relative;
  width: 100%;
  float: left
}

#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}

如果需要水平和垂直居中:

left: 50%;
top: 50%;
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的最新版本上有效。