Question

我正在为高级网页设计建立一个网站，而我却陷入困境。我希望页面的内容（包含在<div>中）居中。使用CSS我尝试了这个：

body {text-align: center; margin-left: auto; margin-right:auto;}

这似乎不起作用。我知道你可以使用Javascript检测浏览器分辨率，我开始思考。我如何检测宽度，并使用它来设置身体的左右边距？我需要((resolutionWidth - 800) / 2)来确定我需要的边距（<div>是800px宽）。

Answer 1

margin: 0 auto是在网站上集中内容的最简单方法之一。除非绝对必要，否则不要使用JS来集中内容。

查看此jsFiddle，了解如何使用margin: 0 auto：http://jsfiddle.net/NfRtV/

Answer 2

margin: auto仅在元素具有宽度时有效。尝试指定宽度并重新测试代码！

body { 
  width: 500px; 
  margin: auto; 
  border: 1px solid black; 
  text-align: center; 
 }

您无法检测其显示器分辨率，但可以检测屏幕宽度和高度。这些都可以通过javascript访问。虽然你显然不应该这样做，因为有一种CSS方法可以这样做。

  viewportwidth = window.innerWidth;
  viewportheight = window.innerHeight;

Answer 3

将宽度设置为与auto边距相同的元素。所以像这样：

#page { width: 800px; margin: 0 auto; }

在IE的某些版本中，这不起作用，因此请在此元素周围包含div，为其提供text-align: center，并在子div中重置。

示例标记：

<body>
  <div id="ie-page-center">
    <div id="page">
    ...
    </div>
  </div>
</body>

示例CSS：

#ie-page-center { text-align: center; }
#page { width: 800px; margin: 0 auto; text-align: left; }

Answer 4

使用此代码

<script language="javascript"> alert('Width:' + screen.width+ ' & Height: ' +screen.height); </script>