第一步：打开网页编辑器，新建一个网页文件。
第二步：我们编写两个div标签用来做一个对比演示，既嵌套式div。
第三步：首先我想让最外层的div进行真正意义上的居中——既在浏览器页面水平方向和垂直方向都居中显示。
第三步：开始编写css样式：
第四步：上述样式解释，因为设置了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本身宽度的一半即可实现水平和垂直都居中显示。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
