css stack center div 在另外两个之上

Question

这应该相当简单。我试图将一个 div 置于其他两个 div 之上，但是我不知道如何在重新调整窗口大小时让它停留在那里。

#middle{
    z-index:10;
    border-radius:10px;
    border:15px solid #232323;
    background: #232323;
    width:400px;
    height:200px;
    text-align:center;
    top:180px;
    position:absolute;
}

我只希望“中间”div 位于其他两个 div 之间并位于页面中间。请看看 fiddle ，让我知道我可以在这里做什么。

http://jsfiddle.net/VwRkC/

我一直在修修补补，但我对 css 不是很有经验。

谢谢

Answer 1

试试这个:

#middle{
    z-index:10;
    border-radius:10px;
    border:15px solid #232323;
    background: #232323;
    width:400px;
    height:200px;
    text-align:center;
    top:180px;
    left: 50%;
    margin-left: -215px; /* This is half the total width (width + border + padding) */
    position:absolute;
}