在父级中对齐子级 div 居中/底部答案

【问题标题】：Aligning a child div centered/bottom in parent在父级中对齐子级 div 居中/底部
【发布时间】：2015-09-01 21:44:50
【问题描述】：

我想将子 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/，您可以看到header-image 和其中的一些文字，但文字必须位于header-image div 的底部。

【问题讨论】：

制作一个 jsfiddle 以准确显示您想要做什么。另外，您是否考虑过只使用 CSS 的“背景”属性？
做了一个 jsfiddle - 见jsfiddle.net/7CDzq/3

标签： css html alignment

【解决方案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%
}

Fiddle

【讨论】：

嗯，在这里尝试过jsfiddle.net/toddihh/7CDzq，但内容不在标题图像的底部。
@toddiHH：好吧，我误解了你的要求。检查更新的答案
OK .row 现在位于底部，但 #header-image 向左移动了 50%。我需要 .row 作为#header-image 上的覆盖。参见webstopp.de。有什么想法吗？
但实际上位置：绝对，行不能居中对齐。在这种情况下，无法使用 left:50%, left:-50%，因为 header.image 会向右移动。 margin: 0 auto 由于位置：absolute 也无法正常工作。也许我将 div class="inner" 放入 div class="row" （小提琴更新）

【解决方案2】：

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

【讨论】：