本文共 761 字，大约阅读时间需要 2 分钟。
将一个div在窗口内实现居中效果，基本上没有什么难度，具体可以参阅章节。
但是有时候我们可能会有这样的需求，就是在调整窗口大小的情况下也能够实现div垂直水平居中效果，下面通过代码实例做一下简单介绍,代码如下:
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < meta name = "author" content = "" /> < title >蚂蚁部落</ title > < style type = "text/css" > *{ margin:0px; padding:0px; } #thediv{ width:200px; height:100px; background:green; position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-50px; } </ style > </ head > < body > < div id = "thediv" ></ div > </ body > </ html > |
上面的代码实现了我们的要求，因为div采用的是绝对定位，并且采用百分比的方式来确定div的基本位置，不是采用固定尺寸的方式，然后在使用外边距向回调整一定的距离，这样就实现了居中效果，同时调整浏览器窗口也会实现一直居中的效果。
原文发布时间为：2017-3-9
本文作者：admin
本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落
原文链接：
转载地址：http://abddx.baihongyu.com/