我想在窗口的中心放置一个div（with position:absolute；）元素。但我在这样做时遇到了问题，因为宽度未知。
我尝试了以下CSS代码，但它需要调整，因为宽度是响应的。
.center {
left: 50%;
bottom: 5px;
}
我怎样才能做到这一点？
当前回答
HTML格式：
<div id='parent'>
<div id='child'></div>
</div>
CSS:
#parent {
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
我知道我已经给出了答案，我之前的答案和其他人的答案都很好。但我在过去使用过这个，它在某些浏览器和某些情况下效果更好。所以我想我也会给出这个答案。我没有“编辑”我之前的答案并添加它，因为我觉得这是一个完全独立的答案，我提供的两个答案并不相关。
其他回答
我想补充一下bobince的回答：
<body>
<div style="position: absolute; left: 50%;">
<div style="position: relative; left: -50%; border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
</body>
改进：///这使得水平滚动条不会在居中的div中出现大元素。
<body>
<div style="width:100%; position: absolute; overflow:hidden;">
<div style="position:fixed; left: 50%;">
<div style="position: relative; left: -50%; border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</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)
});
};
只需使用一个新的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;
}
这个问题的公认解决方案不适用于我的情况。。。
我正在为一些图片做字幕，我用这个解决了这个问题：
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>
