调整浏览器窗口大小时平均减少空间答案

【问题标题】：Reducing the space equally when resizing browser window调整浏览器窗口大小时平均减少空间
【发布时间】：2015-06-12 10:43:59
【问题描述】：

当调整浏览器窗口的大小时，浏览器只会减少元素后面的空间。我想像在 Facebook 中一样减少左右两侧的空间。

这是我的代码

CSS：

body{
     margin-left:10%;
     margin-right:10%;
}

HTML：

<body>
Some content
.
.
.
.
</body>

首先我想给身体一个min-width。但是屏幕尺寸较小的计算机将是一个问题。 min-width 也不是很好的解决方案。

【问题讨论】：

【解决方案1】：

只需将宽度80% 分配给您的body 并将margin-left 和margin-right 分配给auto 以进行居中对齐

   body{
      margin:0 auto;
      width:80%;
    }

建议：

给 body 赋予样式不是一个好习惯，给页面中的顶级父 div 赋予样式

像这样，

<body>
<div class="container">
       all page elements.....
</div>
</body>

CSS：

container{
          margin:0 auto;
          width:80%;
        }

【讨论】：

【解决方案2】：

【讨论】：

【解决方案3】：

有什么问题

width: 50em;
max-width: 95%;
margin: 0 auto;

正如网络上多次建议的那样，显示一个居中的包装器，它会随着浏览器窗口收缩和扩展，左右间距相等……

【讨论】：