怎么让div居中

第一步：打开网页编辑器，新建一个网页文件。

第二步：我们编写两个div标签用来做一个对比演示，既嵌套式div。

第三步：首先我想让最外层的div进行真正意义上的居中——既在浏览器页面水平方向和垂直方向都居中显示。

第三步：开始编写css样式：

 <style type="text/css">

#out{

    width:400px;height:200px;border:5px dotted #ff0066;

    position:absolute; top:50%;left:50%; margin-top:-100px; margin-left:-200px;

}

</style>

第四步：上述样式解释，因为设置了div的宽度为400px，高度为200px。又设置了绝对定位，默认是相对于页面左上角的相对位置。然后设置了top为50%、left50%就是相对于页面左上角的位置的一半，此时因为div的宽高原因，需要将margin-top属性（距离页面顶部）设置为div高度的一半，同理需要将margin-left（距离页面左边）设置为div宽度的一半即可。

第五步：上述css的写法就是让最外边的div水平垂直都居中的方法。接下来我们设置里面的第二个div的居中显示代码。第二个div在第一个div的里面水平垂直页居中显示。

第六步：因为第二个div是包裹在第一个div元素里面的，因此不再设置position属性，可以直接根据margin属性进行居中，css代码为：

#inside{

       width:200px;height:100px;background:#00ff33;

       margin:0 auto; margin-top:50px;

}

解释：margin-top为50px的原因也是设置为其本身高度的一半。

第七步：css代码编写完成后，在浏览器终究可以看到，两个div都是水平垂直居中显示的。

总结：

1、首先编写div标签的基本样式：宽和高

2、通过结合position属性和margin属性进行居中操作

3、需要注意的是，当position设置为绝对定位（absolute）时，位置是基于页面的左上角位置，因此，在设置margin属性时，通常距离顶部的距离设置为其div本身高度的一半，距离左边的距离设置为div本身宽度的一半即可实现水平和垂直都居中显示。