css - 居中/底部堆叠的 div？

Question

我有一个像这样的 div 设置:

<div class ="outer">
    <div class = "inner"></div>
</div>

像这样使用 CSS:

.outer {
width: 300px;
height: 200px;
background: red;
}
.inner {
position: absolute;
width: 200px;
height: 50px;
background: black;
opacity: .5;
}

所以基本上是一个 div 堆叠在另一个 div 之上。但是，我希望顶部 div 位于父 div 的底部并居中，而不是左上角。我该怎么做？

Answer 1

听起来您希望内部 div 绝对定位在外部 div 中，在这种情况下，这应该可行:

.outer {
position: relative;
width: 300px;
height: 200px;
background: red;
}
.inner {
position: absolute;
width: 200px;
height: 50px;
bottom: 0px;
left: 50px;
background: black;
opacity: .5;
}