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

jsフィドル

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