关于文字/图片/flash上下居中问题
方法一
标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。
非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。
<!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>上下左右居中</title>
<style type="text/css">
<!--
body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:#000000;}
#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: 1003px;margin: 0 auto;} /* for explorer only */
div.greenBorder { width:1003px; height:500px; background-color:#999999; line-height:500px; text-align:center;}
}
-->
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner" class="greenBorder">
上下左右居
</div>
</div>
</div>
</body>
</html>
方法二（对xhtml （严格型和过渡型）框架不适用）
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上下左右居中</title>
<style type="text/css">
<!--
body {
margin: 0px 0px;
}
-->
</style>
</head>
<body>
<div style=" width: 100%; height: 100%; background-color:#000000;">
<div style=" margin-top:0px; margin-left:0px; height:500px; width:1003px; text-align:center; line-height:500px; background-color:#999999;position: absolute;top:expression((this.parentElement.offsetHeight-this.offsetHeight)/2);left:expression((this.parentElement.offsetWidth-this.offsetWidth)/2);">上下左右居中</div></div>
</body>
</html>
关于absolute 和relative;
absolute的英文意思是绝对的意思,实际上是针对父级元素元素定位,如果父级元素没有position:relative|absolute,则追至再上一个父级元素,直至相对于文档的左上角定位，按照我们中国人的理解观念，这个其实是相对定位，是脱离文档流的。用了abolute属性，原有float属性将失效；
relative的英文意思是相对的意思，实际上是相对于对象当前位置的定位。而且是不脱离文档流的，就算用top、lef、bottom、right或margin将其移动位置，它也会在原来的文档流中占有自己实际大小的一块位置。
说白了，absolute是相对于父对象定位，relative是相对于当前位置定位！就是这么简单！
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
