我想在窗口的中心放置一个div（with position:absolute；）元素。但我在这样做时遇到了问题，因为宽度未知。
我尝试了以下CSS代码，但它需要调整，因为宽度是响应的。
.center {
left: 50%;
bottom: 5px;
}
我怎样才能做到这一点？
当前回答
#container
{
position: relative;
width: 100%;
float: left
}
#container .item
{
width: 50%;
position: absolute;
margin: auto;
left: 0;
right: 0;
}
其他回答
我使用了类似的解决方案：
#styleName {
position: absolute;
margin-left: -"X"px;
}
其中“X”是要显示的div宽度的一半。它适用于所有浏览器。
<div style='position:绝对；左：50%；顶部：50%；转换：转换（-50%，-50%）'>此文本居中。</div>
这将使div中的所有对象居中，位置类型为static或relative。
我知道这个问题已经有了一些答案，但我从来没有找到一个能在几乎所有的类中都适用的解决方案，它也很有意义，而且很优雅，所以这里是我经过调整后的看法：
.容器{位置：相对；}.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轴上工作。或者两者兼而有之，就像我的例子一样。我不能想出一个不起作用的情况。
可以使用calc（）将纵横比为1的元素与位置绝对值居中
在下面的示例中，我使用了一个圆，因为它更容易解释和理解，但相同的概念可以应用于任何具有纵横比的形状：1表示宽度和高度相等。（关于纵横比）
：根目录{--直径：80px；}第二部分{位置：绝对；顶部：计算（50%-var（--直径）/2）；右：计算（50%-var（--直径）/2）；纵横比：1；width:var（--直径）；边界半径：100%；背景：蓝色；}＜div/＞
解释
.center {
position: absolute
left: 50%;
bottom: 5px;
}
.center:before {
content: '';
display: inline-block;
margin-left: -50%;
}
