css布局网页水平居中常用方法

  页面水平居中一般会令人很头疼,尤其新手。浏览器之间的不兼容也会带来很大问题。下面来说一下常见的页面水平居中办法。

  以下内容参见《精通CSS》。

  HTML代码:

  

复制代码 代码如下:

  <body>

  <div id="wrapper">

  </div>

  </body>

  IE居中办法:

  body {

  text-align:center;

  min-width:760px;

  }

  #wrapper {

  width:720px;

  text-align:left;

  }

  IE会将text-align:center 误以为让所有东西居中,而不只是文本。然后将容器的内容重新对准左边即可。

  非IE:

  

复制代码 代码如下:

  #wrapper {

  width:720px;

  margin:0 auto;

  }

  如何兼容IE和非IE?如下:

  

复制代码 代码如下:

  #wrapper {

  width:720px;

  position:relative;

  left:50%;

  margin-left:-360px;

  }

  首先将容器左边边缘定位到页面中间,然后向左移动它宽度的一半。