[HTML]<div>标签绝对定位设置内容绝对居中

绝对居中:即在客户端上任何分辨率下纵横方向均居中

涉及知识点:

CSS类、id属性定义
DIV标签绝对定位属性

样例代码:
必需的重点部分由红色标记

<html>
<head>
<title>Nice and Free CSS Template 11</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css"><!--
/*   body und schrift deffinitionen */
body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px;
margin:0px;

}
#inhalt {
position:absolute;
height:200px;
width:400px;

margin:-100px 0px 0px -200px;
top: 50%;
left: 50%;

text-align: left;
padding: 0px;
background-color: #f5f5f5;
border: 1px dotted #000000;
overflow: auto;
}
p, h1 {
margin: 0px;
padding: 10px;
}
h1 {
font-size: 11px;
text-transform:uppercase;
text-align: right;
color: #564b47;
background-color: #90897a;
}
a {
color: #ff66cc;
font-size: 11px;
background-color:transparent;
text-decoration: none;
}
--></style>
</head>
<body>
<div id="inhalt">

<p><b>centered</b><br /><br />
This area should be horizontally and vertically centered.<br />
This text stays left aligned<br />
<b>ie mac doesn’t like this! </b><br />
<a href="/">more nice and free css templates</a>
</p>
<p>
</div>
</body>
</html>

注意:#inhalt的定义中 height和width值应分别是margin中第一参数、第四参数的两倍,否则不居中。

posted @ 2009-06-28 11:38  悠尘  阅读(4325)  评论(0编辑  收藏  举报