2、在test.html文件中，使用div标签创建一个模块，用于测试居中效果。
3、在test.html文件中，设置div的class属性为test，下面将通过该class属性设置其css样式。
4、在test.html文件内，编写<styletype=text/css></style>标签，页面的css样式将写在该标签内。
5、在css标签中，对div进行样式设置，使用width属性设置div的宽度为400px，使用height属性设置div的宽度为200px，使用background属性设置div的背景颜色为灰色。
6、在css标签中，使用margin属性对div的外边距进行设置，两边的外边距设置为auto，便可实现div居中效果。
7、在浏览器打开test.html文件，查看实现的效果。
因为“text-align:center”控制的是文本居中，div居中可以用外边距margin来实现。
1、新建html文件，在body标签中添加div标签，div标签中的内容为“演示文本”，添加题目中的css样式，为了方便演示，给div标签添加灰色背景，这时可以发现div靠近浏览器的左侧，文字在div中居中：
2、为div标签添加新的外边距“margin”属性，属性值为“0 auto”，“0”指的是上下外边距为0，“auto”指的是左右外边距为自适应：
3、这时无论浏览器的宽度是多少，div都会在浏览器上水平居中：
第一种方式：设置body 居中。在CSS中的代码是（body{text-align:center}）第二种方式：用盒子模型，首先设置一个Div ，这个DIV的宽度为100%，然后在这个DIV居中，那么在这个DIV中加的内容就居中显示，代码如下：
<div class="div1">
<div class="div2"></div>
</div>
CSS 样式代码：
<style type="text/css">
.div1{text-align:centerwidth:100%}
.div2{width:980pxbackground:red} //为了看清效果，加了背景颜色
</style>
第三种方式：margin：0 auto；
