| [转帖]一个div在页面中绝对居中的办法。 | ||
| 添加日期：2014/11/20 17:18:41 | 快速返回 返回列表 | 阅读2351次 |
<DOCTYPE html> <html> <head> <style> body{ margin:0px; width:100%; height:100%; } .box{ position:absolute; top:50%; left:50%; width:500px; height:200px; } .content{ position:relative; top:-50%; left:-50%; width:100%; height:100%; background:red; } </style> </head> <body> <div class="box"> <div class="content"> </div> </div> </body> </html> 上面是简单代码，原理很简单，即使用box来确定body的中间位置和宽高，content相对于box来定位即可实现居中。 自感觉 优点：兼容好，不像vertical-align等属性IE不支持；定位都是用百分比，不用根据div的宽高来定位；代码简单易用；用于页面中单独一个居中框比较适用。 缺点：每个居中的div需要两层div来实现；需要绝对定位和相对定位结合，页面较复杂时可能需要调整的东西较多或不适用。 之前在网上搜索了许多关于垂直居中的解决方式(参考：http://fyting.iteye.com/blog/92437)有vertical-align+table-cell实现的，有line-height来实现的，有margin实现的，总是感觉不是特别的兼容通用。 |
||
| 评论 COMMENTS | |
| 没有评论 No Comments. |
