html - 边距:即使设置了宽度，自动设置的div也不会居中

好的，这使我很烦，因为这是一个很小的问题-但显然我无法使其正常工作。

我正在制作一个响应式/流畅的网站。这是HTML：

<div id="Wrapper">
    <div id="InnerWrapper">
        stuff...
    </div>
</div>

CSS：

* {
    outline: none;
    font-family: 'PT Sans', sans-serif;
    font-size: 16px;
    resize: none;
    font-style: normal;
    font-variant: normal;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
html {
}
body {
    background: #f2f2f2; /*#f6f6f6;*/
    margin: auto;
    height: 100%;
    overflow-x: hidden;
}

/*MOBILE*/
@media (min-width: 200px) {
    #Wrapper {
        width: 100%;
        height: auto;
        float: left;
        margin: 42px 0 0 0;
    }
        #InnerWrapper {
            width: 96%;
            float: left;
            margin: 10px 2%;
        }
}
/*TABLET*/
@media (min-width: 600px) {
    #Wrapper {
        width: 100%;
        height: auto;
        float: left;
        margin: 42px 0 0 0;
    }
        #InnerWrapper {
            width: 96%;
            float: left;
            margin: 10px 2%;
        }
}
/*PC*/
@media (min-width: 980px) {
    #Wrapper {
        width: 980px;
        height: auto;
        margin: 42px auto 0 auto;
        border: 1px solid red;
    }
        #InnerWrapper {
            width: 980px;
            margin: 10px 0 0 0;
            border: 1px solid green;
        }
}

所以...当浏览器宽度大于980px时，设计应固定为980px。它不做的就是居中！

我怎样才能解决这个问题。这让我很烦。

最佳答案

元素是float: left。浮动布局算法的优先级高于边距，并强制将元素向左移动（允许其后的内容在其旁边冒泡）。

要使其居中时不要将其浮动。

关于html - 边距:即使设置了宽度，自动设置的div也不会居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48420651/