html - 将一个 DIV 定位在另一个 DIV 的底部和中心，响应式

Question

如何将一个 div 定位在另一个需要与底部对齐并居中的 div 中？必须响应，使用引导程序。

例子

<div class="parent">
    <div class="sibling">
    ...
    </div>
</div>

.parent{
    width: 800px;
    height:400px;
    background-color:red;
}
.sibling{
    width:300px;
    height:50px;
    background-color: green;
}

注意：我不能使用position:absolute;

Answer 1

在包装元素的帮助下：

.parent{
    width: 800px;
    height:400px;
    background-color:red;
    position: relative;
}
.sibling{
    width:300px;
    height:50px;
    background-color: green;
    margin: 0 auto;
}
.wrapper{
    width: 100%;
    position: absolute;
    bottom: 0;
}

jsFiddle

Answer 2

对兄弟使用绝对位置，对父使用相对位置

小提琴

    .parent {
        position: relative;
        width: 800px;
        height:400px;
        background-color:red;
    }
    .sibling {
        bottom: 0;
        left: 50%;
        margin-left: -150px;
        position: absolute;
        width:300px;
        height:50px;
        background-color: green;
    }