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

最新推荐文章于 2024-11-27 00:43:03 发布

转载最新推荐文章于 2024-11-27 00:43:03 发布 · 8.7k 阅读

文章标签：

#div #border #css

CSS样式专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用CSS实现网页元素在不同分辨率下绝对居中的方法。通过设置div元素的position属性为absolute，并结合top和left属性以及特定的margin值，可以使一个指定大小的div在屏幕中精确地居中显示。

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

紫色的正方形为绝对定位的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>