注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦与见

天空擅长,与世人分享寂寞。

 
 
 

日志

 
 
关于我

释寻,原名熊蕾。诗人,摄影师,设计师,网络工程师。 现居武汉。热衷艺术。 爱好诗文、音乐、美术、影视、IT等。 擅长写诗,绘画,摄影,平面设计,书刊排版,视频编辑,音频处理,网络建设等。

网易考拉推荐
 
 

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

2010-08-31 16:05:42|  分类: 整理收藏 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

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

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

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

样例代码:

 

DIV层绝对居中【垂直和水平】

#content{
position:absolute;
width:650px;
height:298px;
left:50%;
top:50%;
margin-left:-325px;  
/*设置为宽度的一半*/
margin-top:-149px;  
/*设置为高度的一半*/
}

 

 

实例:

  1. <html>  
  2. <head>  
  3.     <title>Nice and Free CSS Template 11</title>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
  5.     <mce:style type="text/css"><!--   
  6.         <!   
  7.         -- /*   body und schrift deffinitionen */ body   
  8.         {   
  9.             background-color: #e1ddd9;   
  10.             font-size: 12px;   
  11.             font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;   
  12.             color: #564b47;   
  13.             padding: 0px;   
  14.             margin: 0px;   
  15.         }   
  16.         #inhalt   
  17.         {   
  18.             position: absolute;   
  19.             height: 200px;   
  20.             width: 400px;   
  21.             margin: -100px 0px 0px -200px;   
  22.             top: 50%;   
  23.             left: 50%;   
  24.             text-align: left;   
  25.             padding: 0px;   
  26.             background-color: #f5f5f5;   
  27.             border: 1px dotted #000000;   
  28.             overflow: auto;   
  29.         }   
  30.         p, h1   
  31.         {   
  32.             margin: 0px;   
  33.             padding: 10px;   
  34.         }   
  35.         h1   
  36.         {   
  37.             font-size: 11px;   
  38.             text-transform: uppercase;   
  39.             text-align: right;   
  40.             color: #564b47;   
  41.             background-color: #90897a;   
  42.         }   
  43.         a   
  44.         {   
  45.             color: #ff66cc;   
  46.             font-size: 11px;   
  47.             background-color: transparent;   
  48.             text-decoration: none;   
  49.         }   
  50.         -- >  
  51. --></mce:style><style type="text/css" mce_bogus="1">        <!   
  52.         -- /*   body und schrift deffinitionen */ body   
  53.         {   
  54.             background-color: #e1ddd9;   
  55.             font-size: 12px;   
  56.             font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;   
  57.             color: #564b47;   
  58.             padding: 0px;   
  59.             margin: 0px;   
  60.         }   
  61.         #inhalt   
  62.         {   
  63.             position: absolute;   
  64.             height: 200px;   
  65.             width: 400px;   
  66.             margin: -100px 0px 0px -200px;   
  67.             top: 50%;   
  68.             left: 50%;   
  69.             text-align: left;   
  70.             padding: 0px;   
  71.             background-color: #f5f5f5;   
  72.             border: 1px dotted #000000;   
  73.             overflow: auto;   
  74.         }   
  75.         p, h1   
  76.         {   
  77.             margin: 0px;   
  78.             padding: 10px;   
  79.         }   
  80.         h1   
  81.         {   
  82.             font-size: 11px;   
  83.             text-transform: uppercase;   
  84.             text-align: right;   
  85.             color: #564b47;   
  86.             background-color: #90897a;   
  87.         }   
  88.         a   
  89.         {   
  90.             color: #ff66cc;   
  91.             font-size: 11px;   
  92.             background-color: transparent;   
  93.             text-decoration: none;   
  94.         }   
  95.         -- ></style>  
  96. </head>  
  97. <body>  
  98.     <div id="inhalt">  
  99.         <p>  
  100.             <b>centered</b><br />  
  101.             <br />  
  102.             This area should be horizontally and vertically centered.<br />  
  103.             This text stays left aligned<br />  
  104.             <b>ie mac doesn’t like this! </b>  
  105.             <br />  
  106.             <a href="/" mce_href="">more nice and free css templates</a>  
  107.         </p>  
  108.     </div>  
  109. </body>  
  110. </html>  

  评论这张
 
阅读(470)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017