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

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

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

我怎样才能做到这一点?


当前回答

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

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

其他回答

尽量不要使用CSS的阴暗面。避免使用负值作为边距。我知道有时候你会被迫做一些糟糕的事情,比如左边距:-450px,但你可能会做一些右边距:450px。这只是我的工作方式。

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

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

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

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

只需使用一个新的div包装您的内容并使用display flex,然后使用align-items:center;并调整内容:中心;看看。。。

<div class="firstPageContainer">
  <div class="firstPageContainer__center"></div>
</div>
.firstPageContainer{
  display: flex;
  width: 1000px;
  height: 1000px;
  justify-content: center;
  align-items: center;
  background-color: #FF8527;
}

.firstPageContainer__center{
  position:absolute;
  width: 50px;
  height: 50px;
  background-color: #3A4147;
}

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

left: 50%;
top: 50%;
transform: translate(-50%, -50%);