css - 在父级中对齐子级 div 居中/底部

Question

我想将div父母div（header-image作为背景图像）内的孩子垂直和水平居中对齐到底部。

<div id="header-image">
    <div class="row">
        ... Content
    </div>
</div>

我找到了水平居中的解决方案：

<div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%;">
        ... content
    </div>
</div>

但不知道如何将内容放到底部（仅适用于position:absolute）

为了更好地理解http://webstopp.de/，您可以在其中看到 aheader-image和一些文本，但文本必须位于header-image div.

Answer 1

#header-image {
    background: url("http://placehold.it/200x200&text=[banner img]") no-repeat;
    height: 200px;
    width: 200px;
    position: relative;
    left: 0;
    bottom:0;
}
.row {
    position: absolute;
    left: 50%;
    bottom:0;
}
.inner {
    position: relative;
    left: -50%
}

小提琴

Answer 2

为您的孩子 div 试试这个：margin-top: 99%;