[css提高] CSS完全居中代码

tension

管理员

Rank: 9 Rank: 9 Rank: 9

1^# 大中小发表于 2008-6-14 16:23 只看该作者

CSS完全居中代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> - FooterStick(width-100%) - RexSong.com</title>
<style type="text/css">
* { font-size:12px; font-family:Arial, Helvetica, sans-serif; }
html { height:100%; border:0; border-right:1px #fff solid;}
body { margin:0; padding:0; position:relative; width:100%; background:#eee;
min-height:100%; /* For Modern Browsers */
height:auto !important; /* For Modern Browsers */
height:100%; /* For IE */}
#head { width:100%; text-align:center; background:#FF9400; height:100px; position:absolute; top:0;}
#head_height { height:100px;}
#middle { margin:200px; vertical-align:middle;
position:absolute;
top:50%;
margin-top:-100px;
background:#000000;
width:200px;
height:200px;
left:50%;
margin-left:-100px;}
#foot { width:100%; text-align:center; background:#f00; height:100px; position:absolute; bottom:0;}
* html #foot { bottom:-1px;}
#foot_height { height:100px;}
.xx{width:100%; height:100%; background-color:green;}
</style>
</head>
<body>
<!--
<div id="head" style=" line-height:100px; font-weight:bold;">head</div>

<div id="head_height"></div>
-->
<div id="middle">
	<div class="xx">我想水平垂直居中于上面的middle的div</div>
</div>

</body>
</html>

提示：您可以先修改部分代码再运行

TOP

‹‹ 上一主题 | 下一主题 ››

393张高清晰web2.0站点截图	425款精品毛笔墨迹+38款墨迹底纹..	10位Master级别的Photoshop高手	绝对漂亮的笔刷
Soul 近期新作品欣赏..	熟女养成日志—长草	魔幻抽象/吸血鬼传说！！	photoshop仿CG滤镜