例句：
以下总结下使用Div和CSS实现页面水平居中的方法：
一、margin:auto 0 与 text-aligh:center
在浏览器（如Internet Explorer 7、Firefox、Opera等）实现水平居中很简单，只要设定到左右两侧的空白为自动即可。
例句：
#wrap { margin:0 auto;}
代码说明：
wrap这个div到左右两侧的距离自动设置，上下为0（可以为任意）。
请在浏览器（如Internet Explorer 7、Firefox、Opera等）中运行代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>div居中显示 - www.jb200.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
div#wrap {
width:760px;
margin:0 auto;
border:1px solid #333;
background-color:#ccc;
}
</style>
</head>
<body>
<div id="wrap">
在Firefox等现代浏览器设定页面元素的水平居中，只要指定margin:0 auto;即可
<pre>
div#wrap {
width:760px;
margin:0 auto; /*这里的0可以任意值*/
border:1px solid #ccc;
background-color:#999;
}
</pre>
</div>
</body>
</html>
以上效果在Internet Explorer 6及改正的版本中是不起作用的。
可以参考如下的解决方法：
在Internet Explorer中text-align属性是可继承的，即在父元素中设置后在子元素中就默认具有了该属性。
因此，可以在body标签中设置text- align属性值为center，这样页面内所有的元素都会自动居中，同时还要加一个hook把页面中的文字变成习惯的阅读方式——居左对齐。
代码：
这样在Internet Explorer中，轻松实现了Div的居中对齐。
因此，要在所有的浏览器中显示居中的效果，可以这样写：
body { text-align:center; }
#wrap { text-align:left;
margin:0 auto;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> CSS+Div实现水平居中对齐的页面布局-www.jb200.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { text-align:center; }
div#wrap {
text-align:left;
width:760px;
margin:0 auto;
border:1px solid #333;
background-color:#ccc;
}
</style>
</head>
<body>
<div id="wrap">
在Firefox等现代浏览器设定页面元素的水平居中，只要指定margin:0 auto;即可
<pre>
div#wrap {
width:760px;
margin:0 auto; /*这里的0可以任意值*/
border:1px solid #ccc;
background-color:#999;
}
在Internet Explorer 6 及以下的版本中我们还要做以下的设置：
body { text-align:center; }
div#wrap {
text-align:left;
}
</pre>
</div>
</body>
</html>
前提：
设置居中的元素要有固定的宽度，比如这里设定了为760像素。
二、相对定位与负的边距
对于wrap进行相对定位，然后使用负的边距抵消偏移量。
实现：
代码说明：
设置wrap的定位是相对于其父元素body标签的，然后将其左边框移动到页面的正中间（也就是left:50%含意）；
最后，再从中间位置向左偏移回一半的距离来，即可实现实现水平居。
例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> CSS+Div实现水平居中对齐的页面布局 - www.jb200.com </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
div#wrap {
position:relative;
width:760px;
left:50%;
margin-left:-380px;
border:1px solid #333;
background-color:#ccc;
}
</style>
</head>
<body>
<div id="wrap">
在所有浏览器中都有效的方法：
<pre>
div#wrap {
position:relative;
width:760px;
left:50%;
margin-left:-380px;
border:1px solid #333;
background-color:#ccc;
}
</pre>
</div>
</body>
</html>
同样，在设定水平居中前需要设定一个固定的宽度。
三、其它的居中方式
以上介绍的方法中，都是设定了具体宽度的情况下水平居中的实现。
有时，想做一个弹性布局，或者当一个元素处于一个容器中时我们只想让它居中并不想设定一个具体的宽度。
其实这并不是真正的居中布局，就像对一个100%长度的元素来说，你说它是居中对齐还是居左对齐呢？
所以所有不高宽度的居中都不是真正的居中。
一般使用的像元素的padding来设置的，实际中是改变了父元素的容器大小：
例如，希望wrap元素长度随窗口而改变，同时又维持居中，可以这样写：
只需要保持父元素左右两侧的填充是相等即可。
例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 随浏览器窗口大小而改变的具有弹性的居中布局 -www.jb200.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
padding:10px 150px;
}
div#wrap {
border:1px solid #333;
background-color:#ccc;
}
</style>
</head>
<body>
<div id="wrap">
一种随浏览器窗口大小而改变的具有弹性的居中布局：
<pre>
body {
padding:10px 150px;
}
这里，只需要保持父元素左右两侧的填充是相等即可。
</pre>
</div>
</body>
</html>
虽然只是“貌似居中”，却很有用处的。