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;
}

Answer 2

给 auter div 位置：相对

给内部div位置：绝对和底部：0px；左：0px；或任何你喜欢的地方。

给出外部 div 位置非常重要：相对。如果不是有时它会工作，有时不是。当然，它不会像所有东西一样在非常古老的 Internet Explorer 中工作。

绝对元素没有高度，所以如果你不能使用指定的（比如高度：120px）你就是f ***。您只能通过 javascript 检查一个绝对元素的高度并使用特殊边距添加它。

如果你的内部空间很少，你可以使用 z-index 来确定哪个容器在顶部。