屏幕居中(DIV/CSS) 的几种方法(转)
如是在标准模式下要加样式body,html{height:100%;padding:0;margin:0;}
<table width="100%" height="100%" border="0"align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="text-align:center;">
<table width="200" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#ef1122">
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
2.利用负边距方法，绝对定位使容器相对屏幕绝对居中，此时的被嵌套容器只能为绝对大小。（标准）根据margin负值和top left的比例控制，实现随屏幕绝对居中，容器大小改变需要重新调整margin top left的参数：
<div style="background:#f00; width:740px; height:340px; left:50%; margin:-170px 0 0 -370px; position:absolute; top:50%;">
</div>
3.老外给出的另类方法，巧妙利用display:inline-block;IE6.0测试通过。（标准）
注意1.height:100%是关键：2.edge与container没有嵌套关系：
这应该算是IE的一个bug，个人对display:inline-block理解有限。edge可以看作一个填充，container现在是一个上下居中的对象，加了背景色能看的更清楚，当然你也可以在container内添加任何绝对或者相对大小容器。但问题在于span只是一个内联元素，在内部添加块级元素是不标准的逻辑。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><BR>
<title>无标题文档</title>
<style type="text/css">
<!--body { margin:0; height:100%;}
#edge { width:0; height:100%; display:inline-block; vertical-align:middle;}#container { text-align:center; width:100%; display:inline-block; vertical-align:middle;}-->
</style>
</head>
<body>
<!-- required for xhtml1.1 validation only -->
<span id="edge"></span><span id="container">
<div style="width:200px; height:50px; background:#f00; line-height:50px;">仅IE6.0环境下实现</div>
</span>
</body>
</html>
4.CSS行为expression_r_r控制实现，不过expression_r_r为IE独有，并且耗资源严重，尤其在大量使用的时候。（标准）
注意关键定义，不要以为height:100%在IE内是没用的：
实时获取屏幕高宽值，分别减去容器高宽值再除以2，得到准确坐标绝对定位：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title><style type="text/css">
<!--html,body { height:100%;}--></style>
</head>
<body>
<div style="background:#f00; position:absolute; left:expression_r_r((body.clientWidth-50)/2); top:expression_r_r((body.clientHeight-50)/2);width:50px;;height:50px;"></div>
</body>
</html>
5.FF1.5测试通过，绝对定位，边距为比例，此时容器高宽始终为viewport的50%相对大小（标准）：
<div style="position:absolute; top:0; right:0; bottom:0; left:0; width:50%; height:50%; margin:auto; background:#f00; color:white; line-height:20px; text-align:center;">FF1.5测试通过</div>
6.FF1.5测试通过，绝对定位，直接定位上下左右，强制边局实现容器相对大小（标准）：
代码：略
7.ff1.5 IE5 IE6通过测试
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical centering in valid CSS</title>
<style type="text/css">
body {padding: 0; margin: 0; font-size: 75%; line-height: 140%; font-family:Arial, Helvetica, sans-serif;}
body,html{height: 100%; }
a{color: #333;}
a:hover{color: green;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory; }
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;text-align:center;}
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 600px;margin: 0 auto;text-align:left;}
div.greenBorder {border: 1px solid green; #FFF;}
p{margin: 1em;}
</style>
<script type="text/javascript">
// <![CDATA[
function toggleContent(name,n) {
var i,t='''''''''''''''''''''''''''''''',el = document.getElementByIdx(name);
if (!el.origCont) el.origCont = el.innerHTML;
for (i=0;i<n;i ) t = el.origCont;
el.innerHTML = t;
}
// ]]>
</script>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner" class="greenBorder">
<p><a href="javascript:toggleContent(''''''''''''''''inner'''''''''''''''',1)">默认长度</a> <a href="javascript:toggleContent(''''''''''''''''inner'''''''''''''''',2)">加长页面</a></p>
<p> 1.打开illustrator,新建一个文件，画个矩形，比你要导入的图片大一些，白色填充。 <br />
2.选中矩形，菜单：Effect > Distort & Transform > Zig Zag，设置如下图。 <br />
3.菜单：Effect > Stylize > Drop Shadow，设置如下图。 <br />
1.打开illustrator,新建一个文件，画个矩形，比你要导入的图片大一些，白色填充。 <br />
2.选中矩形，菜单：Effect > Distort & Transform > Zig Zag，设置如下图。 <br />
3.菜单：Effect > Stylize > Drop Shadow，设置如下图。</p>
<address style="text-align:center; padding: .5em; clear: left;">
Design by <a href="//www.webjx.com">Webjx</a> 本演示采用<a href="//www.creativecommons.cn/">创作共用授权</a>--署名和非商业用途。
</address>
</div>
</div>
</div>
<script src="//www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-152060-1";
urchinTracker();
</script>
<noscript><p>google-analytics</p></noscript>
<script src="//www.webjx.com/*/*.js" type="text/javascript"></script>
<noscript><p>stat.</p></noscript>
</body>
</html>
8.利用expression_r_r(仅对IE)
<div style="background:blue;position:absolute;left:expression_r_r((body.clientWidth-50)/2);top:expression_r_r((body.clientHeight-50)/2);width:50;height:50"></div>
9.
<html><head>
<style>div{position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;width:200px;height:200px;background:#000;filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=green,endColorStr=cyan);}body{filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=green,endColorStr=cyan);}</style></head>
<div>
<br><center>
<img src="">
<br>
<style>
#a{font-size:18px;font-family:华文行楷;color:cyan;filter:dropshadow(offx=2,offy=2,direction=135,color=#001199);width:200;}
#b{font-size:32px;font-family:隶书;color:#09fa09;filter:shadow(direction=135,color=green,strength=3);width:899;}
</style>
<a id="a">居中</a>
</div>
</body>
</html>
屏幕居中(DIV/CSS) 的几种方法(转)的更多相关文章
- CSS实现自适应不同大小屏幕的背景大图的两种方法（转自简书）
CSS实现自适应不同大小屏幕的背景大图的两种方法 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块 ...
- CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- CSS教程:div垂直居中的N种方法[转]
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- div垂直居中的几种方法
CSS教程:div垂直居中的N种方法[转](原文地址:http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html) 在说到这个问题的时候 ...
- HTML5结合CSS的三种方法+结合JS的三种方法
HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...
- div+css隐藏内容样式方法
div css隐藏内容样式方法 div+css隐藏内容方法 一般情况下,css隐藏的用途,如下: 1.对文本的隐藏 2.隐藏超链接(另类黑链) 3.对统计代码隐藏 4.隐藏超出图片 5.css ...
- CSS中设置DIV垂直居中的N种方法 兼容IE浏览器
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- CSS盒子居中的常用的几种方法
第一种: 用css的position属性 <style type="text/css"> .div1 { width: 100px; height: 100px; bo ...
- div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的 CSSHack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的 ...
随机推荐
- 第一百三十节，JavaScript，封装库--连缀
JavaScript,封装库--连缀 学习要点: 1.连缀介绍 2.改写库对象 本章我们重点来介绍,在调用库的时候,我们需要能够在前台调用的时候可以同时设置多个操作,比如设置CSS,设置innerHT ...
- 记JavaScript的入门学习（三）
2016.12.6晚上十点半完成JavaScript的第二章学习,看了点第三章的开头总述,都说原生js每一个知识点都可以分分钟钟让你放弃,而我在努力探索着.月末的时候就回家放假了,希望在家也可以有个小 ...
- Bucket Sort - leetcode [桶排序]
桶排序(Bucket sort)或所谓的箱排序,是一个排序算法,工作的原理是将数组分到有限数量的桶里.每个桶再个别排序(有可能再使用别的排序算法或是以递归方式继续使用桶排序进行排序).桶排序是鸽巢排序 ...
- 字符函数库 - cctype 和 climits 中的符号常量
一. C++从C语言中继承一个与字符相关的.非常方便的函数软件包,他可以简化诸如确定字符是否为大写字母‘数字.标点符号等工作,这些函数的原型在头文件cctype(老式的为ctype.h)中定义的.例如 ...
- 关于Objective-C Associated Objects
一.相关函数 与Associated Objects相关的函数有三个 1 void objc_setAssociatedObject(id object, const void *key, id va ...
- CodeForces 706C Hard problem
简单$dp$. $dp[i][0]$:第$i$个串放置完毕,并且第$i$个串不反转,前$i$个串字典序呈非递减的状态下的最小费用. $dp[i][1]$:第$i$个串放置完毕,并且第$i$个串反转,前 ...
- 驱动相关Error
驱动中 fltKernel.h报 EPROCESS和PETHREAD重定义异常解决办法 驱动编写中经常会莫名出现 error C2371: 'PEPROCESS' : redefinition; di ...
- [河南省ACM省赛-第三届] 网络的可靠性 （nyoj 170）
题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=170 根据题意,需要找到度数为1的结点个数,如下图: #include<iostre ...
- emguCv3.x 实现字符分割，轮廓检测
/// <summary> /// 获取区域 /// </summary> /// <param name="bitmap"></para ...
- sharepoint 2013基于AD的Form表单登录（三）——选择用户时，屏蔽掉AD。
//来源:http://www.cnblogs.com/lrforever/p/3695820.html 隐藏AD人员选择,$ad.IsVisible设置为true,则显示出AD里用户 $cpm = ...