今天小编跟大家讲解下有关DIV以及图片水平垂直居中兼容多种浏览器 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关DIV以及图片水平垂直居中兼容多种浏览器 的相关资料，希望小伙伴们看了有所帮助。
第一种：全CSS控制 层漂浮（适用于做登陆页面） 复制代码代码如下: <%@ page language="java"import="java.util.*"pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP</title> <meta http-equiv="pragma"content="no-cache"> <meta http-equiv="cache-control"content="no-cache"> <meta http-equiv="expires"content="0"> <meta http-equiv="keywords"content="keyword1,keyword2,keyword3"> <meta http-equiv="description"content="This is my page"> <style type="text/css"> #divcenter{ position:absolute; top:50%; left:50%; width:300px; height:300px; margin-top:-150px; margin-left:-150px; background:yellow; border:1px solid red; } </style> </head> <body> <div id="divcenter"> this is a test </div> </body> </html> 第二种：JS + CSS控制 不漂浮（适用于做登陆页面） 复制代码代码如下: <%@ page language="java"import="java.util.*"pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP</title> <meta http-equiv="pragma"content="no-cache"> <meta http-equiv="cache-control"content="no-cache"> <meta http-equiv="expires"content="0"> <meta http-equiv="keywords"content="keyword1,keyword2,keyword3"> <meta http-equiv="description"content="This is my page"> <script type="text/javascript"> function cen(){ var divname = document.all("testdiv"); //居中高度等于页面内容高度减去DIV的高度 除以2 var topvalue = (document.body.clientHeight - divname.clientHeight)/2; divname.style.marginTop = topvalue; } //页面大小发生变化时触发 window.onresize = cen; </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居中演示 </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> 其他的方法：纯css完美地解决图片在div内垂直水平居中 兼容IE7.0、IE6.0、IE5.5、IE5.0、FF、Opera、Safari 以下是程序代码 复制代码代码如下: <html> <head> <meta http-equiv="Content-Type"content="text/html; charset=gb2312"/> <title></title> <style type="text/css"> .img_v { display:table-cell !important; display:block; position:static !important; position:relative; overflow:hidden; width:400px; height:400px; border:1px solid #000; vertical-align:middle; text-align:center; } .img_v p { display:table-cell !important; display:block; margin:0; position:static !important; position:absolute; top:50%; left:50%; width:400px; margin-left:auto; margin-right:auto; } .img_v img { position:static !important; position:relative; top:auto !important; top:-50%; left:auto !important; left:-50%; } </style> </head> <body> <div class="img_v"> <p><img src="https:///images/logo.gif"></p> </div> </body> </html>
来源：爱蒂网
