当两个div都使用自动边距居中时，如何将一个div放在另一个div上？

Question

我有2个div，square和bar。两者都使用auto边距居中。但我想把酒吧放在广场上。我怎么能这样做？

HTML

<div class="square">square</div>
<div class="bar">square</div>

CSS

.square,.bar{
    margin-left:auto;
    margin-right:auto
}
.square{
    background-color:blue;
    width: 100px;
    height: 100px;
}
.bar{
    background-color:green;
    width: 400px;
    height: 40px;
}

Here 是小提琴。

Answer 1

您可以这样做： http://jsfiddle.net/mz6rk/

我做了position:relative并将栏放在-square_height/2 - bar_height/2

这确实假设您知道方形和条形的高度，但我不知道是否总是这样......

<强>更新 实际上，只有酒吧需要position:relative（我把它放在小提琴上）。

Answer 2

http://jsfiddle.net/atomicrevolution/P9yWK/5/

这是你的意思吗？

.square,.bar{
    margin-left:auto;
    margin-right:auto;
}
.square{
    background-color:blue;
    width: 100px;
    height: 100px;
    position: relative;
}
.bar{
    background-color:green;
    width: 400px;
    height: 40px;
    position: relative;
    margin-top: -70px;
}