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

如果不向其父div添加position:absolute;，则无法使position:relative;工作。

在您的情况下，您需要在position:relative; ID中添加wrapper。

以下是 WORKING DEMO

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

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

css堆栈中心div在另外两个之上

2 个答案: