css实现浏览器垂直水平居中效果代码:
可能是由于居中相对美观一些吧，所以一些弹窗或者功能模块出现的位置都是位于网页中间，下面就介绍一端利用css实现的将div实现垂直水平居中的效果，代码如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">#antzone{ position:absolute; top:50%; left:50%; margin:-100px 0 0 -150px; width:300px; height:200px; z-index:99; background:green;} </style></head><body><div id="antzone"></div></body></html>上面的代码实现div垂直水平居中效果，下面简单介绍一下原理。
实现原理:
首先设置div为绝对定位，然后将其top和left值分别设置为50%，但是这样并没有实现div的中心点垂直水平居中效果，而是将div的左上角实现了垂直水平居中，所以还得利用外边距margin设置上边距和左边距分别为负数，尺寸分别是高和宽的一半，这样就实现了中心点居中效果。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=15400
更多内容可可以参阅:http://www.softwhy.com/divcss/
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
885
