zen-cart网站,模版,采集,二次开发

首页 ? 网页前端 ? CSS ? 阅读文章

CSS垂直居中实现方法总结

2012-01-10 12:08 16769 0 发表评论
标签:


全部转载别人的,留作记录备查,框架


1.利用line-height

范围:适用于单行文本或图片

原理:当line-height高度和容器高度相等时,line-height行高即会向上和向下空出容器的一半高度,即垂直居中了。

即增加css

.wrap{line-height:250px;}

演示:demo

缺点:IE6不支持,增加IE6的hack


2.利用 position 和负边距

利用绝对定位,让元素的顶部与居中线对齐,再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个可视化说明:

即增加代码

.wrap{position:relative;}
.wrap span{position:absolute;top:50%;	margin-top:-25px;left:50%;margin-left:-96px;}

演示:demo

缺点: 必须知道元素的宽高

3.利用display:table

table中垂直居中是非常简单的事,table cells 的 vertical-align:middle 就可以直接解决。因此我们可以在支持display:table / display:table-cell的浏览器中利用table的这一属性。

即增加代码

.wrap{display:table;}
.wrap span{display:table-cell;vertical-align:middle;}

演示:demo

缺点: IE6/IE7不支持

4.最终方案

只要加多一层。内 .hack 层 top:50%; 再让 span 层相对自身向上提50%。

即增加代码

.wrap{display:table; *position:relative;}
.wrap .hack{display:table-cell;vertical-align:middle;*position:absolute;*top:50%;*left:50%;}
.wrap span{ *position:relative;*top:-50%;*left:-50%;}

演示:demo

转载:http://sofish.de/1909
http://bbs.blueidea.com/thread-2666987-1-1.html

相关日志:

评论 共0条 (RSS 2.0) 发表评论

  1. 暂无评论,快抢沙发吧。

发表评论

  • ?
  • 插入代码

联系我 Contact Me

回到页首