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

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

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

我怎样才能做到这一点?


当前回答

在寻找解决方案时,我得到了前面的答案,可以将内容以Matthias Weiler的答案为中心,但使用文本对齐:

#content{
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}

它与谷歌Chrome和Firefox配合使用。

其他回答

我知道这个问题已经有了一些答案,但我从来没有找到一个能在几乎所有的类中都适用的解决方案,它也很有意义,而且很优雅,所以这里是我经过调整后的看法:

.容器{位置:相对;}.container.cat链接{位置:绝对;左:50%;顶部:50%;变换:translate3d(-50%,-50%,0);z指数:100;文本转换:大写;/*强制CSS将其视为文本,而不是纹理,这样就不会出现更模糊的错误*/背景色:白色;}.色块{高度:250px;宽度:100%;背景色:绿色;}<div class=“container”><a class=“cat link”href=“”>类别</a><div class=“color block”></div></div>

这是说给我一个顶部:50%,左侧:50%,然后在X/Y轴上变换(创建空间)到-50%的值,在某种意义上“创建镜像空间”。

因此,这会在div的所有四个点上创建一个相等的空间,它始终是一个长方体(有四条边)。

这将:

工作时不必知道父对象的高度/宽度。致力于响应。在X轴或Y轴上工作。或者两者兼而有之,就像我的例子一样。我不能想出一个不起作用的情况。

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

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

响应式解决方案

假设div中的元素是另一个div。。。

此解决方案运行良好:

<div class="container">
  <div class="center"></div>
</div>

容器可以是任何大小(必须是相对位置):

.container {
    position: relative; /* Important */
    width: 200px; /* Any width */
    height: 200px; /* Any height */
    background: red;
}

元素(div)也可以是任何大小(必须小于容器):

.center {
    position: absolute; /* Important */
    top: 50%; /* Position Y halfway in */
    left: 50%; /* Position X halfway in */
    transform: translate(-50%,-50%); /* Move it halfway back(x,y) */
    width: 100px; /* Any width */
    height: 100px; /* Any height */
    background: blue;
}

结果将是这样的。运行代码段:

.容器{位置:相对;宽度:200px;高度:200px;背景:红色;}.中心{位置:绝对;顶部:50%;左:50%;转换:转换(-50%,-50%);宽度:100px;高度:100px;背景:蓝色;}<div class=“container”><div class=“center”></div></div>

我觉得这很有帮助。

这对我有用:

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

这对我有用:

<div class="container><p>My text</p></div>

.container{
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}