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

如何实现标签自适应居中

jsp页面 让标签居中 //通过样式让div中的标签居中.wrap { float: left; /* 自适应内容宽度 */ position: relative; le...
  • qq_35123802
  • qq_35123802
  • 2017年10月18日 17:05
  • 287

div自动适应浏览器窗口水平和垂直居中

无标题文档 自动适应水平和垂直居中 原理就是:
  • wuyanwen888
  • wuyanwen888
  • 2012年11月07日 16:59
  • 1458

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

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

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

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

如何让div自动适应内容宽度,并且居中

将内层div的display设置为table cell能确保div的宽度适应内容的宽度。 将外层div的display设置为table,text-align设置为center,即可保证内层div居中...
  • lanseyuanwei2
  • lanseyuanwei2
  • 2016年07月12日 16:04
  • 355

div自适应屏幕高度

问题描述:本地项目页面左侧菜单点击父亲节点拉伸出子节点后,演示的阴影不能覆盖所有的左侧菜单,现象如下图:此时整个演示的页面要通过滚动条才能看到整个菜单内容 整个菜单都放在div中,div的父亲节点...
  • qq_27802255
  • qq_27802255
  • 2017年04月12日 14:55
  • 5783

怎么让Html的高度自适应屏幕高度

在写css静态页面的时候让Html的高度自适应屏幕高度是一个常见的需求,比如你有一个需要置底的bottom按钮,需要在内容不足一屏的时候显示在屏幕的底部,在内容超过一屏的时候显示在所有内容的底部。 效...
  • u014374031
  • u014374031
  • 2017年04月05日 15:36
  • 12383

如何让一个元素自适应屏幕的高度

让一个元素的高度和屏幕的高度一样,并且随着屏幕高度的变化而变化,用js代码实现;记得写完调用这个函数; //====tree的自适应高度start================...
  • zhangjing1019
  • zhangjing1019
  • 2017年08月01日 17:48
  • 343

css div自适应高度height

DIVCSS5为大家介绍两种情况下自适应高度样式设置与解决。 第一种:一定高度内容加多时自适应高度,而内容少时DIV有一定最小高度; 第二种:没有最小高度,DIV完全自适应高度。 以...
  • z69183787
  • z69183787
  • 2014年02月08日 09:46
  • 1771

html css div自适应屏幕宽度,高度

  • majian_1987
  • majian_1987
  • 2013年07月11日 15:52
  • 10297
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DIV自适应屏幕分辨率,垂直水平居中
举报原因:
原因补充:

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