1、第一步：打开网页编辑器，新建一个网页文件。
3、第三步：首先我想让最外层的div进行真正意义上的居中——既在浏览器页面水平方向和垂直方向都居中显示。
5、第四步：上述样式解释，因为设置了div的宽度为400px，高度为200px。又设置了绝对定位，默认是相对于页面左上角的相对位置。然后设置了top为50%、left50%就是相对于页面左上角的位置的一半，此时因为div的宽高原因，需要将margin-top属性（距离页面顶部）设置为div高度的一半，同理需要将margin-left（距离页面左边）设置为div宽度的一半即可。
7、第六步：因为第二个div是包裹在第一个div元素里面的，因此不再设置position属性，可以直接根据margin属性进行居中，css代码为：#inside{ width:200px;height:100px;background:#00ff33; margin:0 auto; margin-top:50px; }解释：margin-top为50px的原因也是设置为其本身高度的一半。
9、总结：1、首先编写div标签的基本样式：宽和高2、通过结合position属性和margin属性进行居中操作3、需要注意的是，当position设置为绝对定位（absolute）时，位置是基于页面的左上角位置，因此，在设置margin属性时，通常距离顶部的距离设置为其div本身高度的一半，距离左边的距离设置为div本身宽度的一半即可实现水平和垂直都居中显示。