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

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

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

我怎样才能做到这一点?


当前回答

由于我不想更改容器/包装器元素的样式,所以这些解决方案都不适合我。这段代码对我有用:

position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -50px;

其他回答

我使用了类似的解决方案:

#styleName {
    position: absolute;
    margin-left: -"X"px;
}

其中“X”是要显示的div宽度的一半。它适用于所有浏览器。

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

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

响应式解决方案

如果您不需要支持IE8或更低版本,这里有一个很好的解决方案,可用于响应设计或未知尺寸。

.centered-axis-x {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

.外部{位置:相对;/*或绝对值*//*不必要的样式设置财产*/保证金:5%;宽度:80%;高度:500px;边框:1px纯红色;}.内部{位置:绝对;左:50%;顶部:50%;转换:转换(-50%,-50%);/*不必要的样式设置财产*/最大宽度:50%;文本对齐:居中;边框:1px纯蓝色;}<div class=“outer”><div class=“inner”>我总是居中<br/>无论我有多少文本、高度或宽度<br/>维度或我的父级也不相关</div></div>

这是一个JS Fiddle

线索是,剩下的:50%是相对于父对象的,而平移变换是相对于元素宽度/高度的。

这样,您就拥有了一个完全居中的元素,子元素和父元素都具有灵活的宽度。奖励:即使孩子比父母大,这也能奏效。

您也可以使用此选项垂直居中(同样,父级和子级的宽度和高度可以完全灵活(和/或未知)):

.centered-axis-xy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

请记住,您可能还需要以转换供应商为前缀。例如-webkit转换: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的最新版本上有效。

这对我有用:

#内容{位置:绝对;左:0;右:0;左边距:自动;右边距:自动;宽度:100px;/*需要特定的值才能工作*/}<body><div><div id=“content”>我是内容</div></div></body>