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

最新推荐文章于 2023-08-13 00:34:20 发布

八月游子

最新推荐文章于 2023-08-13 00:34:20 发布

阅读量8.6k

点赞数

分类专栏： CSS样式文章标签： div border css

CSS样式专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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

八月游子

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
绝对定位的DIV绝对居中显示

绝对居中：即在客户端上任何分辨率下纵横方向均居中紫色的正方形为绝对定位的divposition:absolute; top: 50%; left: 50%; 只能把div定位在以红色圈为起点的位置，加上margin:-100px 0px 0px -100后，便可以让其移动到以红点为中心的位置。; 样例代码： Nice and
复制链接

扫一扫