繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS解决未知高度垂直居中的问题
- CSS样式表
- CSS清除浮动常用方法小结
- 关于td的height和line-height兼容问题
- CSS基础 CSS选择符
- 关于H1的位置解析
- FF下 用 col 隐藏表格列的方法详解！
- 原来CSS里的 !important 是如此用法
- iframe 的用法与注意事项
- 模拟兼容性的 inline-block 属性
- 从p开始，循序渐进
- 自定义标签实现圆角边框
- Iframe自适应高度兼容ie,firefox多浏览器
- IE之死__原来与CSS有关
- 用div实现像table一样的布局方法
- float引起层飘出父层的解决方法
- div+css布局必了解的列表元素ul ol li dl dt dd详解
- 区分IE6，IE7，firefox的CSS hack
- CSS顶级技巧大放送，div+css布局必知
- div+css如何实现页脚的置底
- css层滚动条
- 超级连接的提示中换行效果实现代码
CSS样式表 中的 CSS解决未知高度垂直居中的问题
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 104 ::
收藏到网摘: n/a
除特别说明外，本站内容采用创作共用授权署名和非商业用途,请尊重劳动成果。
原文标题：Vertical Centering in CSS
副标题：Yuhu's Definitive Solution with Unknown Height
翻译：forestgan
尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题（在一个DIV标签里有未知高度的文本或图片的情况下）。
标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。
非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。
CSS
body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 400px;margin: 0 auto;} /* for explorer only */
div.greenBorder {border: 1px solid green; background-color: ivory;}
XHTML
以上CSS代码的优点是没有hacks，采用了IE不支持的CSS2选择器#value[id]。
CSS2选择器#value[id]相当于选择器#value，但是Internet Explorer不支持这种类型的选择器。同样地.value[class]，相当于.value,这些只有标准浏览器能读懂。
测试：Firefox1.5、Opera9.0、IE6.0、IE5.0通过。
评论 (0) All
