查看完整版本: CSS完全居中代码

tension 2008-6-14 16:23

CSS完全居中代码

[html]<!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>
<!--
<div id="foot_height"></div>
<div id="foot" style=" line-height:100px; font-weight:bold;">foot</div>
-->
</body>
</html>[/html]
页: [1]
查看完整版本: CSS完全居中代码