两种方式让DIV上下左右都居中–经测试兼容IE,FF,Opera,Google Chrome

现在的位置: 首页 > 综合 > 正文

两种方式让DIV上下左右都居中–经测试兼容IE,FF,Opera,Google Chrome

2013年09月08日 ⁄ 综合 ⁄ 共 1516字 ⁄ 字号小中大 ⁄ 评论关闭

第一种：全CSS控制，层漂浮（适用于做登陆页面）

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gb2312" > <head> <title>居中Demo</title> </head> <mce:style type="text/css" title="currentStyle" media="screen"></mce:style><style type="text/css" title="currentStyle" media="screen" mce_bogus="1">#divcenter{ position:absolute;/*层漂浮*/ top:50%; left:50%; width:300px; height:300px; margin-top:-150px;/*注意这里必须是DIV高度的一半*/ margin-left:-150px;/*这里是DIV宽度的一半*/ background:yellow; border:1px solid red; }</style> </head> <body> <div id="divcenter"> this is a test </div> </body> </html>

第二种：JS + CSS控制，不漂浮（适用于做登陆页面）

代码如下：

<html> <head> <title>DIV居中演示</title> <mce:script type="text/javascript"></mce:script> </head> <body style="height:100%; width:100%; text-align:center;" onload=cen()> <div id = "testdiv" name="testdiv" style="margin:0 auto; border:1px solid red; height:400px; width:400px;"> DIV居中演示 </body> </html>

最简单适用的一种　　上下左右都居中，兼容所有浏览器

<div style="position:absolute; top:50%; height:240px;border:1px solid red; margin:0 auto; margin-top:-120px; width:300px; left:50%; margin-left:-150px;"></div>

【上篇】ADO.Net使用方面优化
【下篇】Matrix Power Series—-矩阵乘法(二分)

作者: daisy8088

该日志由 daisy8088 于11年前发表在综合分类下，最后更新于 2013年09月08日.
转载请注明: 两种方式让DIV上下左右都居中–经测试兼容IE,FF,Opera,Google Chrome | 学步园 +复制链接

抱歉!评论已关闭.

学步园

两种方式让DIV上下左右都居中–经测试兼容IE,FF,Opera,Google Chrome

作者: daisy8088

书签

最新文章New

本站推荐

返回首页