我想在窗口的中心放置一个div（with position:absolute；）元素。但我在这样做时遇到了问题，因为宽度未知。
我尝试了以下CSS代码，但它需要调整，因为宽度是响应的。
.center {
left: 50%;
bottom: 5px;
}
我怎样才能做到这一点？
当前回答
我知道这个问题已经有了一些答案，但我从来没有找到一个能在几乎所有的类中都适用的解决方案，它也很有意义，而且很优雅，所以这里是我经过调整后的看法：
.容器{位置：相对；}.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轴上工作。或者两者兼而有之，就像我的例子一样。我不能想出一个不起作用的情况。
其他回答
如果需要水平和垂直居中：
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
<body><div style=“position:absolute；left:50%；”><div style=“位置：相对；左：-50%；边框：红色虚线1px；”>我是一些中心收缩以适应内容<br/>翻土；翻土</div></div></body>
您还可以创建中间件div#centered框，以绝对值、左财产和右财产居中，不带width属性，然后将主内容div设置为其具有display:inline-block框的子项，并使用为其中间件父框设置的text-align:center将其居中
#集装箱{位置：相对；宽度：300px；高度：300px；边框：实心1px蓝色；颜色：#DDDDD；}#居中{位置：绝对；文本对齐：居中；边距：自动；顶部：20px；左：0；右：0；边框：1px红色虚线；填充：10px 0px；}#居中>div{边框：实心1px红色；显示：内联块；颜色：黑色；}<div id=“container”>你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界<div id=“center”>＜div＞你好世界<br/>我不知道我的宽度<br/>但我还是绝对的！</div></div></div>
这里有一个有用的jQuery插件来实现这一点。我在这里找到的。我不认为纯粹使用CSS是可能的。
/**
* @author: Suissa
* @name: Absolute Center
* @date: 2007-10-09
*/
jQuery.fn.center = function() {
return this.each(function(){
var el = $(this);
var h = el.height();
var w = el.width();
var w_box = $(window).width();
var h_box = $(window).height();
var w_total = (w_box - w)/2; //400
var h_total = (h_box - h)/2;
var css = {"position": 'absolute', "left": w_total + "px", "top":
h_total + "px"};
el.css(css)
});
};
Flexbox可用于对绝对定位的div。
display: flex;
align-items: center;
justify-content: center;
.相对{宽度：275px；高度：200px；背景：皇家蓝；颜色：白色；边距：自动；位置：相对；}.绝对块{位置：绝对；高度：36px；背景：橙色；填充：0px 10px；底部：-5%；边框：1px实心黑色；}.居中文本{显示：柔性；对齐内容：中心；对齐项目：居中；盒子阴影：1px 2px 10px 2px rgba（0、0、0和0.3）；}<div class=“relative center text”>相对块（Relative Block）绝对块</div></div>
