html - CSS-如何在不添加边距的情况下使页面居中？

Question

我们有一个通过 SharePoint 2013 生成的网页，宽度为 1024。我们在主要内容 div 上使用以下样式:

#container_master {
    width:1024px !important;
    margin-left: auto !important;
    margin-right: auto !important;  
    background-color:#FFF !important;
}

这适用于大于 1024 的分辨率。每当有人将他们的分辨率设置为 1024(我们有几个人这样做)时，左右两侧都会有一些额外的填充这带来了水平滚动条。

每当我使用 FireBug 时，我都会看到生成了以下 HTML:

<div aria-relevant="all" aria-live="polite" style="margin-left: 20px; margin-right: 20px; min-width: 1024px;">

左右这20px的外边距就是问题所在。我发现可以通过添加以下 CSS 将其删除:

html body.ms-backgroundImage form#aspnetForm div#s4-workspace.ms-core-overlay div#s4-bodyContainer div#contentRow div {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

但是，每当我执行此操作时，页面不再以大于 1024 的屏幕尺寸为中心。关于如何使使用 1024 分辨率的页面“全屏”同时使分辨率更高的页面居中的任何想法？

Answer 1

在 CSS 中有一个很好的技巧。

使用:

html body.ms-backgroundImage form#aspnetForm div#s4-workspace.ms-core-overlay div#s4-bodyContainer div#contentRow div {
  margin-left: 0 auto !important;
  margin-right: 0 auto !important;
}

这等同于:

html{ margin: 0px; margin: auto; }

有时 IE 不会使用 margin: auto;要解决这个问题(以某种方式)添加:

body {
  text-align: center;
 }

但这只发生在旧的 IE 浏览器上。