div水平居中完整代码（兼容所有浏览器）：


<html>
<head>
  <title>DIV水平居中</title>
  <style>
   body{text-align:center;}
   .juzhong{margin:0 auto;}
  </style>
</head>
<body>
  <div class="juzhong">本例代码展示了一个div水平居中效果</div>
</body>
</html>

关键CSS代码：


body{text-align:center;}
.juzhong{margin:0 auto;}

关键HTML代码：、


<div class="juzhong">本例代码展示了一个div水平居中效果</div>

详解：

1.text-align属性：规定元素中的文本的水平对齐方式。

参数：left 把文本排列到左边（默认值）；right 把文本排列到右边；center 把文本排列到中间；justify 实现两端对齐文本效果；inherit 规定应该从父元素继承 text-align 属性的值。

在本例中，我们通过text-align:center规定在body中的所有html文本默认排列到中间。

2.margin：规定元素四个外边距属性

在本例中，我们通过margin：0 auto规定class为juzhong的div元素的上下外边距为0，左右外边距为调整。

绝大多数现代浏览器通过margin:0 auto就可以实现div水平居中了，但是IE9以下等老版本浏览器还是需要定义父元素text-align:center才可以实现div水平居中。

在线演示：DEMO

代码下载：http://pan.baidu.com/s/1hrRXJCS

(adsbygoogle = window.adsbygoogle || []).push({});