绝对定位的DIV绝对居中显示

来源：互联网发布：淘宝环球网商数码代购编辑：程序博客网时间：2024/05/09 21:53

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

紫色的正方形为绝对定位的div

position:absolute;
top: 50%;
left: 50%; 只能把div定位在以红色圈为起点的位置，加上margin:-100px 0px 0px -100后，便可以让其移动到以红点为中心的位置。;

样例代码：

<html><head> <title>Nice and Free CSS Template 11</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> <! -- /* 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="/" mce_href="">more nice and free css templates</a> </p> </div></body></html>