将一个DIV浮动居中于另一个DIV之上

Question

我希望将一个 div 浮动在另一个 div 上方，但是要居中（宽度）。

编辑：我想让容器 div 浮动在顶部 div 上方并居中。

当前的 CSS：

body {
    background-color: #FFF;
    margin: auto;
}

#top {
    background-color: #F2F2F2;
    border-bottom: 1px solid #CCC;
    height: 150px;
    position: relative;
}

#container {
    background-color: #FFF;
    border: 1px solid #CCC;
    width: 920px;
    height:300px;
    position: absolute;
    top:0;
    right:auto;
}

这是我得到的内容：。

- ritch

Answer 1

设置左边距为50%，并且设置margin-left为-460px（div宽度的一半）

- vinothkr

---

谢谢，我有同样的问题！！！已解决！底部也是50%，边距也是...+1 - tatactic

Answer 2

试试这个。虽然没有经过测试，但你基本上需要将容器 div 设置为相对定位，然后再将其中的 div 设置为绝对定位。

body {
        background-color: #FFF;
        margin: auto;
    }

#top {
    background-color: #F2F2F2;
    border-bottom: 1px solid #CCC;
    top: 50%;
    left: 50%;
    position: absolute;
}

#container {
    background-color: #FFF;
    border: 1px solid #CCC;
    width: 920px;
    height:300px;
    position: relative;
    right:auto;
}

- Catfish

Answer 3

我建议将#top的position属性设置为absolute，并使用一些javascript来设置left属性为#container的left + #container宽度的一半 - #top宽度的一半。

即，在包含jQuery之后（未经测试）：

$(document).ready(function(){
    var topLeft = $("#container").css("left") + ($("#container").css("width")/2) - ($("#top").css("width")/2);
    $("#top").css("left", topLeft);
});

在左侧为零的情况下，例如您提供的示例，该$("#container").css("left")项是不必要的。

编辑：您还必须确保适当设置两个div的z-index属性。

- Ken Bellows