div是网页设计中的布局标签，经常用来进行复杂的布局，那么怎么让div居中呢？下面就随我一起进行实际操作吧。
工具/原料
操作系统：win10专业版64位
网页编辑器：Editplus5
方法/步骤
1、第一步：打开网页编辑器，新建一个网页文件。
2、第二步：我们编写两个div标签用来做一个对比演示，既嵌套式div。
3、第三步：首先我想让最外层的div进行真正意义上的居中——既在浏览器页面水平方向和垂直方向都居中显示。
4、第三步：开始编写css样式：<styletype="text/css&q掼鸿乡羰uot;> #out{ width:40扉钛笆哇0px;height:200px;border:5pxdotted#ff0066;position:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-200px; }</style>
5、第四步：上述样式解释，因为设置了div的宽度为400px，高度为200px。又设置了绝对定溴腻男替位，默认是相对于页面左上角的相对位置。然后设置了top为50%、left50%就是相对于页面左上角鹚兢尖睁的位置的一半，此时因为div的宽高原因，需要将margin-top属性（距离页面顶部）设置为div高度的一半，同理需要将margin-left（距离页面左边）设置为div宽度的一半即可。
6、第五步：上述css的写法就是让最外边的div水平垂直都居中的方法。接下来我们设置里面的第二个div的居中显示代码。第二个div在第一个div的里面水平垂直页居中显示。
7、第六步：因为第二个div是包裹在第一个div元素里面的，因此不再设置position属性，逐吴哉姆可以直接根据margin属性进行居中，css代码为：#inside{ 惺绅寨瞀width:200px;height:100px;background:#00ff33;margin:0auto;margin-top:50px; }解释：margin-top为50px的原因也是设置为其本身高度的一半。
8、第七步：css代码编写完成后，在浏览器终究可以看到，两个div都是水平垂直居中显示的。
9、总结：首先编写div标签的基本样式：宽和高通过结合position属性和margin属性进行居中操作需要注意的是，当position设置为绝对定位（absolute）时，位置是基于页面的左上角位置，因此，在设置margin属性时，通常距离顶部的距离设置为其div本身高度的一半，距离左边的距离设置为div本身宽度的一半即可实现水平和垂直都居中显示。