css技巧分享：让div水平垂直居中

制作网页的朋友经常都会遇到div水平垂直居中这种情况,例如我们做网站欢迎页和登录页,有时候甚至要求不管切换何种分辨率都必须是div始终水平垂直居中。现在就为大家分享一个使div水平垂直居中的应用技巧,该技巧简便易用,且兼容各主流浏览器和分辨率大小。 首页我们打开dreamweaver或者其他文本编辑器,创建一个div,例如下图创建的名divbox的div层。 下来我们给divbox定义一个样式：.divbox{ width:500px; height:300px; background:#ccc;}样式根据实际需要编写，如下图所示： 我们用浏览器打开预览一下效果，这里我为了清楚的表示div水平垂直的效果给页面加了一个背景，效果如下图所示一切就绪，现在我们添加css样式，使div处于水平垂直居.divbox{ width:500px; height:300px; background:#ccc;position:absolute; left:50%; top:50%; margin-left:-250px; margin-top:-150px; }*注意：margin-left和margin-topt的取值是根据实际应用进行调整所得到的，使用position定位后div会有偏移并不居中，这就需要用margin进行微调。一旦调整后，在切换浏览器和屏幕分辨率大小，就会发现div现在已经稳稳的停在页面中间了。效果如下图所示：下来我们用不同的浏览器进行检测，如果想检测IE的各个版本是否兼容，可以用ietester进行检测如果没有ietester，可以按F12浏览器自带的开发者工具进行模式调整，如下图：其它浏览可直接打开检测，也可以调整屏幕分辨率进行检测，这里就不做检测了。这么简单的一段样式，写的这么繁琐复杂，只是为了大家能够一次就记住，方便以后使用，谢谢大家的浏览。