html - 将最大宽度的 div 居中，没有边距 : auto;

Question

那是我的笔:http://codepen.io/helloworld/pen/oxgqpJ

我想将一个具有固定最大宽度的 div 居中，但是当我在固定最大宽度以下时，我希望每边有 10% 的边距，因为此时在该分辨率区域中没有可见边距。

缺点是每边使用 10% 的边距，div 不再居中，它从左侧开始...

我该如何解决？

<div id="container">
  Center me with a fixed max width, but when I am under the fixed max width I want a margin of 10% on each side , because at the moment there is no visible margin.
</div>



#container
{
  margin: 0 auto;

  // use instead in smaller resolutions
  //margin: 0 10%;
  max-width:1024px;
  background:orange;
}

Answer 1

你可以使用这个，例如:

@media (max-width: 1024px) {
    #container { margin: 0 10%; }
}

参见 http://www.w3schools.com/cssref/css3_pr_mediaquery.asp