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

【问题标题】：Position a DIV inside another DIV to the bottom and center, responsively将一个 DIV 定位在另一个 DIV 的底部和中心，响应式
【发布时间】：2015-06-21 09:12:50
【问题描述】：

如何将一个 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;

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

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

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

【讨论】：

如果没有绝对定位，我认为不太可能做到这一点。看看这个post
那里的一位顶级 cmets 建议您使用桌子。如果表格不会破坏您的设计；)

【解决方案2】：

在包装元素的帮助下：

.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

【讨论】：

如果 position: absolute; 破坏了你的设计，只需给父元素一个底部填充，并带有兄弟元素的高度