[让CSS更规范]让设计居中

摘自《精通CSS:高级Web标准解决方案》

长文本行难以阅读。随着现代显示器的尺寸越来越大，屏幕可读性问题变得越来越重要。缓解这个问题的一种方法是让设计居中。居中的设计只占屏幕的一部分，而不是横跨屏幕的整个宽度，这样就会创建比较短的容易阅读的行。

居中的设计目前非常时髦，所以如何在CSS中设计居中是大多数开发人员首先要学习的主题之一。让设计居中有两个基本方法：一个方法使用自动空白边，另一个方法使用定位和负值的空白边。

使用自动空白边让设计居中

假设有一个典型的布局，希望让其中的容器div在屏幕上水平居中：

 

 

为此，只需定义容器div的宽度，然后将水平空白边设置为auto:

#wrapper {
  width: 720px; 
  margion: 0 auto;
  }

在这个示例中，我决定以像素为单位指定容器div这宽度，让它适合800*600分辨率的屏幕。但是，也可以将宽度设置为主体的百分数，或者使用em相对于文本字号设置宽度。

这在所有现代浏览器中都是有效的。但是，怪异模式中的IE5x和IE6不支持自动空白边。幸运的是，IE将text-align:center误解为让所有东西居中，而不只是文本。可以利用这一点，方法是让主体标签中的所有东西居中，包括容器div，然后将容器的内容重新对准左边：

body {
  text-align: center;
  }

#wrapper { 
  width: 720px;
  margin: 0 auto;
  text-align: left;
  }

以这种方式使用text-align属性是一种招数，但是这个招数是无害的，对代码没有严重的影响。容器现在在IE以及比较符合标准的浏览器中都会居中。

为了让这个方法在所有浏览器中都能够顺利地工作，需要做最后一件事情。在Netscape6中，当浏览器窗口的宽度减少到小于容器的宽度中，容器的左边会跑到屏幕的外边，就无法访问它了。为了防止这种现象，需要将主体元素的最小宽度设置为等于或略大于容器元素的宽度：

body {
  text-align: center;
  min-width: 760px;
  }

#wrapper {
  width: 720px;
  margin: 0 auto;
  text-align: left;
  }

现在，如果试图将窗口的宽度减小到小于容器div的宽度，就会出现滚动条，使用户能够访问所有内容。

使用定位和负值空白边让设计居中

到目前为止，使用自动空白边进行居中的方法是最常用的，但是它需要用一个招数来满足IE5.x的要求。它还要求对两个元素而不只是一个元素应用样式。因此，有些人喜欢使用定位和负值空白边来代替这种方法。

与前面一样，首先定义容器的宽度。然后将容器的position属性设置为relative, 将left属性设置为50%。这会把容器的左边缘定位在页面的中间。

#wrapper {
  width: 720px;
  position: relative;
  left: 50%;
  }

但是，并不希望让容器的左边缘居中，而是希望让容器的中间居中。实现的方法是对容器的左边应用一个负值的空白边，宽度等于容器宽度的一半儿。这会把容器向左边移动它的宽度的一半，从而让它在屏幕上居中：

#wrapper {
  width: 720px;
  position: relative;
  left: 50%;
  margin-left: -360px;
  }

选择使用哪种居中技术是个人喜好问题。但是，同时掌握多种技术总是有好处的，因为不知道什么时候某种技术正好合适。