Home > Article > Web Front-end > css实现浏览器垂直水平居中效果代码_html/css_WEB-ITnose
css实现浏览器垂直水平居中效果代码_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:28:421125browse
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/
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：使用HTML 和CSS 开发商业站点_html/css_WEB-ITnoseNext article：link和@inport详解以及脚本执行顺序探讨_html/css_WEB-ITnose