如何居中对齐固定宽度的 div？

Question

我是 html 和 css 的新手，并且我正在构建的一侧的布局有问题。 我希望侧面的“top_header”和“top_menu”的宽度为 1920px，而“main_section”的宽度仅为 1000px 并在下方居中。 之前，当我将所有内容设置为 1000px 的最大宽度时，它非常好且居中，但现在当我将整个页面更改为 1920px 的最大宽度并将 main_section 更改为 1000px 时，mainsection 已在左侧浮动 2 和我不能让它再次居中请帮忙。

HTML：

    <div id="big_wrapper">
        <header id="top_header">
            <h1>Welcome</h1>
        </header>

        <nav id="top_menu">
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Shop</li>
            </ul>
        </nav>

            <div id="new_div">

            <section id="main_section">
                <article>
                    <header>
                        <hgroup>
                            <h2></h2>
                            <h3></h3>
                        </hgroup>
                    </header>
                    <p></p>
                    <footer>
                        <p></p>
                    </footer>
                </article>

            </section>

            <aside id="side_news">
                <h2></h2>
                <p></p>
            </aside>

            </div>

        <footer id="the_footer">
            <p></p>
            <p></p>
        </footer>
    </div>

CSS：

*{
    margin:0px;
    padding:0px;
}
h1{
    font: bold 25px Tahoma;
}
h2{
    font: bold 19px Tahoma;
}
h3{
    font: bold 14px Tahoma;
}
header, nav, section, article, hgroup, aside, footer;{
    display:box;
}
body{
    width:100%;
    display:-webkit-box;
    -webkit-box-pack: center;
}
#big_wrapper{
    max-width:1920px;
    margin: 20px 0px;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-flex:1; 
}
#top_header{
    border: 2px solid black;
    padding:20px;
    border-radius:10px;
    background: #3b5998;
}
#top_menu{
    border: 2px solid black;
    border-radius:10px;
    text-align:center;
    margin-top:10px;
}
#top_menu li{
    list-style:none;
    display:inline-block;
    padding:5px;
    font: bold 14px Tahoma;
}
#new_div{
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    border:5px solid red;
    width:1000px;
    margin:5px;
}
#main_section{
    border:2px solid black;
    border-radius:10px;
    margin: 30px 20px;  
    padding:20px;
    -webkit-box-flex:1;
}
#main_section article{
    margin:20px;
    padding:20px;
    border:1px solid black;
    border-radius:10px;
}
#main_section footer{
    text-align:right;
}
#side_news{
    border:1px solid black;
    border-radius:10px;
    margin:40px 0px;
    padding:20px;
    width:220px;
}
#the_footer{
    border-top:1px solid black;
    text-align:center;
    margin:10px;
}

Answer 1

像这样将包装器 div new_div从5px更改为0 auto ：

#new_div {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    border: 5px solid red;
    width: 1000px;
    margin: 0 auto;
}

jsFiddle 上面的代码： https ://jsfiddle.net/e0d8my79/184/