如何使div居中并使其在div内部扩展？

Question

我有一个我想要居中的页面,背景和整个内容的边框.

我做了一个div并用背景颜色和我想要的边框设置来设置它.

问题是它里面的div有浮动而背景不会在浮动div周围伸展.我能够让它工作的唯一方法是设置position:absolute.然后边界确实在浮动div周围扩展,但我无法使用常规html/css将它们居中.

我找到了一个javascript hack来使它成为中心,但它只在页面加载后居中并且看起来很糟糕.

我确信有一种方法可以让容器扩展并使其居中,我只是想不出来.

这是一个分享我的问题的示例html页面

<div style="background-color: Red; width: 980px; position: absolute;" id="container">
    <br />
    <br />
    <br />
    <br />
    <div style="width: 400px; background-color: Black; float: left;">
        <br />
        <br />
    </div>
    <div style="width: 400px; background-color: Blue; float: left;">
        <br />
        <br />
    </div>
</div>

这是使它工作的Javascript(使用Jquery)

$(function() {
        var winH = $(window).height();
        var winW = $(window).width();
        $("#container").css('left', winW / 2 - $("#container").width() / 2);
    });

必须有一个更好的方法.

谢谢

Answer 1

使用auto左,右margin居中的元素.

在浮动元素之后放置一个元素,并使用clear它放在它们下面.由于它不是浮动的,它会影响外部div的大小.

<div style="margin: 0 auto; background-color: Red; width: 980px;" id="container">
    <br />
    <br />
    <br />
    <br />
    <div style="width: 400px; background-color: Black; float: left;">
        <br />
        <br />
    </div>
    <div style="width: 400px; background-color: Blue; float: left;">
        <br />
        <br />
    </div>
    <div style="clear: both; height: 0; overflow: hidden;"></div>
</div>