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

【问题标题】：How do I center align a fixed-width div?如何居中对齐固定宽度的 div？
【发布时间】：2017-05-26 16:37:36
【问题描述】：

我是 html 和 css 的新手，我正在构建的一侧的布局有问题。我希望侧面的“top_header”和“top_menu”的宽度为 1920 像素，而“main_section”的宽度仅为 1000 像素并在下方居中。在我将所有内容设置为 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;
}

【问题讨论】：

请提供相关代码以及您的问题。
好的，我添加的代码在第一时间不起作用；P

标签： html css alignment flexbox

【解决方案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/

【讨论】：