我想在窗口的中心放置一个div（with position:absolute；）元素。但我在这样做时遇到了问题，因为宽度未知。
我尝试了以下CSS代码，但它需要调整，因为宽度是响应的。
.center {
left: 50%;
bottom: 5px;
}
我怎样才能做到这一点？
当前回答
据我所知，对于未知的宽度，这是不可能实现的。
如果这在您的场景中有效，您可以绝对定位一个100%宽度和高度的不可见元素，并使用margin:auto和可能的垂直对齐将元素居中。否则，您将需要JavaScript来执行此操作。
其他回答
据我所知，对于未知的宽度，这是不可能实现的。
如果这在您的场景中有效，您可以绝对定位一个100%宽度和高度的不可见元素，并使用margin:auto和可能的垂直对齐将元素居中。否则，您将需要JavaScript来执行此操作。
在寻找解决方案时，我得到了前面的答案，可以将内容以Matthias Weiler的答案为中心，但使用文本对齐：
#content{
position: absolute;
left: 0;
right: 0;
text-align: center;
}
它与谷歌Chrome和Firefox配合使用。
您还可以创建中间件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)
});
};
这个问题的公认解决方案不适用于我的情况。。。
我正在为一些图片做字幕，我用这个解决了这个问题：
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
数字{位置：相对；宽度：325px；显示：块}图标题{位置：绝对；背景：#FFF；宽度：120px；填充：20px；-webkit框阴影：0 0 30px灰色；方框阴影：0 0 30px灰色；边界半径：3px；显示：块；顶部：0；左：0；右：0；左边距：自动；右边距：自动；显示：柔性；对齐项目：居中；}<图><img src=“https://picsum.photos/325/600"><figcaption>但也一样</figcaption></figure>
