设置宽度后使用margin: auto仍无法居中div的问题求助

嘿，我一眼就揪出问题所在啦！你在移动端和平板的媒体查询里给#Wrapper加了float: left，但到了PC端的媒体查询规则里，却没清除这个浮动属性——而浮动元素的margin: auto是完全不会生效的，这就是容器没法居中的核心原因。

修复方案 #

只需要在PC端的媒体查询中，给#Wrapper加上float: none，让它回到正常文档流里，margin: auto就能正常发挥居中作用了。修改后的PC端CSS代码如下：

/*PC*/
@media (min-width: 980px) { 
  #Wrapper { 
    width: 980px; 
    height: auto; 
    margin: 42px auto 0 auto; 
    border: 1px solid red; 
    float: none; /* 新增这一行，清除浮动 */
  } 
  #InnerWrapper { 
    width: 980px; 
    margin: 10px 0 0 0; 
    border: 1px solid green; 
  } 
}

补充说明 #

当元素设置了float后，它会脱离正常的文档流，此时margin: auto的居中逻辑（基于元素在可用空间中均匀分配左右边距）就不再适用了。移除浮动后，元素回到正常流，浏览器就能正确计算左右外边距，实现容器的水平居中。

内容的提问来源于stack exchange，提问作者Niels Hermann