css - CSS堆栈中心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 居中在其他两个和页面中间。请看一下小提琴，让我知道我可以在这里做什么。

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

Answer 2

如果不将 a 添加到其父 div，您将无法position:absolute;工作。position:relative;

在您的情况下，您需要position:relative;在wrapperid 中添加一个。

这是工作演示

#wrapper {
    margin: 0 auto;
    position: relative;
    text-align: center;
    width: 960px;
}

只会position:absolute;使 div 占据其相对于屏幕的位置。通过position:relative;对绝对位置div的父div应用a，将使绝对位置div从其父div的相对定位中获取其定位。