我想在窗口的中心放置一个div（with position:absolute；）元素。但我在这样做时遇到了问题，因为宽度未知。
我尝试了以下CSS代码，但它需要调整，因为宽度是响应的。
.center {
left: 50%;
bottom: 5px;
}
我怎样才能做到这一点？
当前回答
Sass/Compass版本的先前响应解决方案：
#content {
position: absolute;
left: 50%;
top: 50%;
@include vendor(transform, translate(-50%, -50%));
}
其他回答
我想补充一下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>
这对我有用：
#内容{位置：绝对；左：0；右：0；左边距：自动；右边距：自动；宽度：100px；/*需要特定的值才能工作*/}<body>＜div＞<div id=“content”>我是内容</div></div></body>
这适用于您希望在容器元素中心具有的绝对定位元素的任意未知宽度：
Demo
<div class="container">
<div class="box">
<img src="https://picsum.photos/200/300/?random" alt="">
</div>
</div>
.container {
position: relative;
width: 100%;
}
.box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
HTML格式：
<div class="wrapper">
<div class="inner">
content
</div>
</div>
CSS:
.wrapper {
position: relative;
width: 200px;
height: 200px;
background: #ddd;
}
.inner {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
margin: auto;
width: 100px;
height: 100px;
background: #ccc;
}
这里还有更多的例子。
只需使用一个新的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;
}
