码迷,mamicode.com
首页 > Web开发 > 详细

屏幕居中(DIV/CSS) 的几种方法(转)

时间:2015-11-10 20:55:12      阅读:254      评论:0      收藏:0      [点我收藏+]

标签:

1.利用table特性,在width and height all set 100%的时候,可以把容器嵌套在td内形成绝对居中,此时的被嵌套容器可为绝对或者相对大小。(非标准)注意不能加声明!
  如是在标准模式下要加样式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) 的几种方法(转)

标签:

原文地址:http://www.cnblogs.com/libaoli/p/4954079.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!