将一个 DIV 放在另一个 DIV 的底部和中间，响应地

Question

如何将一个 div 放置在另一个需要与底部对齐并居中的 div 中？必须响应，使用 bootstrap.

示例

<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

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

fiddle

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

将一个 DIV 放在另一个 DIV 的底部和中间，响应地

Position a DIV inside another DIV to the bottom and center, responsively

html

css

bootstrap-4