- 本栏最新文章
- 如何实现未知高居垂直居中？ 03-27
- IE7新支持的CSS选择器有哪些？ 03-27
- 如何制作div+css保持xhtml语义结构的表单？ 03-27
- 应用DIV+CSS布局以后 该在什么时候使用TABLE？ 03-27
- 关于条件注释的几个实例代码 03-25
- Web标准设计技巧之一 文本排版浅议 03-25
- Marquee为什么不符合WEB标准？ 03-25
- CSS实战：id是狙击枪 class是双刃剑 合则两利... 03-22
- Div CSS：并非所有内容都必须要div做“容器” 03-22
- text-indent 隐藏文字 出现虚线框outline 03-22
- 本栏推荐文章
- Photoshop教程：水灵灵的美女调出来 12-30
- AS3与后台交互 12-21
- AS3通俗教程---AS3自身loading制作 12-19
如何实现未知高居垂直居中？
尽管我们知道CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题（在一个div容器里有未知高度的文本或图片的情况下）。
标准浏览器如Mozilla，Opera等，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell)，通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。依然解决不了未知高居垂直居中。
非标准浏览器只能在子元素里设距顶部50%，里面再套一个容器元素距顶部-50% 来抵消。最终实现未知高居垂直居中的设置。
看下面的CSS代码：
Example Source Code [www.52css.com]
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代码：
Example Source Code [www.52css.com]
<div id="outer">
<div id="middle">
<div id="inner" class="greenBorder">
</div>
</div>
</div>
我们来看看最终(未知高居垂直居中)效果的实例演示：
Source Code to Run [www.52css.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.52css.com</title>
<style type="text/css">
<!--
body {padding: 0; margin: 0; font-size: 75%; line-height: 140%; font-family:Arial, Helvetica, sans-serif;}
body,html{height: 100%; }
a{color: #333;}
a:hover{color: green;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory; }
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;text-align:center;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 600px;margin: 0 auto;text-align:left;}/*for explorer only */
div.greenBorder {border: 1px solid green; background-color: #FFF;}
p{margin: 1em;}
-->
</style>
<script type="text/javascript">
// <![CDATA[
function toggleContent(name,n) {
var i,t='',el = document.getElementById(name);
if (!el.origCont) el.origCont = el.innerHTML;
for (i=0;i<n;i++) t += el.origCont;
el.innerHTML = t;
}
// ]]>
</script>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner" class="greenBorder">
<p><a href="javascript:toggleContent('inner',1)">默认长度</a> <a href="javascript:toggleContent('inner',2)">加长页面</a></p>
<p> 1.Div CSS布局 常见问题：容器高度1px在IE中达不到效果 如何设置最小高度？ <br />
2.Div CSS布局 常见问题：文本输入框与文本不对齐(input对齐同一行的文字)怎么办？ <br />
3.Div CSS布局 常见问题：网页中可以竖写文字、象古代书籍那样排版吗？ <br />
4.Div CSS布局 常见问题：id与class区别 - 该用id还是用class呢？！ <br />
5.Div CSS布局 常见问题：标题元素、段落和强制换行如何正确使用？ <br />
6.Div CSS布局 常见问题：如何在一个层上面覆盖一个高度自适应的透明层？ </p>
<address style="text-align:center; padding: .5em; clear: left;">
Design by Forestgan 本演示采用创作共用授权署名和非商业用途。
</address>
</div>
</div>
</div>
</body>
</html>
[ 可先修改部分代码 再运行查看效果 ]
