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

将父级的位置绝对用于父级

的父级和位置

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内部到底部并且响应中心

2 个答案: