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

转载 2015年07月11日 09:01:48
<!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

相关文章推荐

div完全纯css自适应居中【兼容IE7+ Chrome FireFox 等】

从产品设计css一直做到linux运维的程序猿...  很多技术都是皮毛,各位见谅,只求和大家交流一点小技术,欢迎拍砖! 1. 纯CSS,完全无需JS,主要就是借用了“万恶”的table..呵呵,...

盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { ...

css自适应宽度 多种方法实现宽度自适应的水平居中

当父元素和子元素都没有定义宽度的情况下实现水平居中:  display:inline-block  可以使用text-align:center和display:inline-block相结合,...
  • iso_wsy
  • iso_wsy
  • 2016年06月16日 17:02
  • 1621

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Android自适应屏幕分辨率

  • 2012年11月16日 17:43
  • 19KB
  • 下载

Unity3D学习笔记01:GUI自适应屏幕分辨率

GUI通常情况下用来制作游戏的菜单界面和游戏运行时的工具栏等,不同型号的手机的屏幕分辨率往往不同,这样我们就会遇到自适应屏幕这个问题,下面我们就来说一下解决办法。        首先我们来看谈一下实现...
  • jukai7
  • jukai7
  • 2013年08月14日 23:27
  • 3679

自适应屏幕分辨率

  • 2014年02月21日 20:15
  • 22KB
  • 下载

cocos2d-x 2.0版本 自适应屏幕分辨率

  • 2012年12月04日 23:59
  • 1.15MB
  • 下载

cocos2d-x 2.0版本 自适应屏幕分辨率

我使用的版本是cocos2d-2.0-x-2.0.4,cocos2dx-2.0版本对多分辨率适配提供了很好的支持,使用起来比1.0版本要简单些,1.0版本的适配可以参考这篇博文。 1. 做2.0版本...

cocos2d-x自适应屏幕分辨率 源码

  • 2012年11月27日 01:46
  • 11.81MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DIV自适应屏幕分辨率,垂直水平居中
举报原因:
原因补充:

(最多只允许输入30个字)