DIV自适应屏幕分辨率，垂直水平居中

最新推荐文章于 2024-04-20 18:01:19 发布

一个人也很酷

最新推荐文章于 2024-04-20 18:01:19 发布

阅读量7.3k

点赞数

分类专栏： WEB 文章标签： http

WEB 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="author" content="Chomo" />
  <link rel="start" href="http://www.14px.com" title="Home" />
  <title>根据内容宽度、高度自适应，垂直水平居中，内容高度超过窗体时，垂直居顶</title>
  <style type="text/css">
   * { margin:0; padding:0; list-style:none; font-size:14px;}
   html { height:100%;}
   body { height:100%; text-align:center;}
   .centerDiv { display:inline-block; zoom:1; *display:inline; vertical-align:middle; text-align:left; width:1200px; padding:10px; border:1px solid #f60; background:#fc0;}
   .hiddenDiv { height:100%; overflow:hidden; display:inline-block; width:1px; overflow:hidden; margin-left:-1px; zoom:1; *display:inline; *margin-top:-1px; _margin-top:0; vertical-align:middle;}
  </style>
 </head>
 <body>

  <div class="centerDiv">
   XD<br/>
   XD<br/>
   XD<br/>
   XD<br/>
   XD<br/>
   XD<br/>
   XD<br/>
   XD<br/>
   XD<br/>
   XD<br/>
   XD<br/>
   XD<br/>
  </div><div class="hiddenDiv"></div>
 </body>
</html>

原文：http://blog.sina.com.cn/s/blog_6d45afa6010162c5.html

一个人也很酷

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DIV自适应屏幕分辨率，垂直水平居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content
复制链接

扫一扫