脚本宝典收集整理的这篇文章主要介绍了DIV以及图片水平垂直居中兼容多种浏览器，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
第一种：全CSS控制，层漂浮（适用于做登陆页面）
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTY
PE HT
ML P
ubLIC "-//W3C//DTD HTML 4.01 Trans
ITional//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="e
xpires" content="0">
<meta http-equiv="keywo
rds" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
#div
center{
position:absolute;/*层漂浮*/
top:50%;
left:50%;
width:300px;
h
eight:300px;
m
argin
-top:-150px;/*注意这里必须是DIV高度的一
半*/
mar
gin-left:-150px;/*这里是DIV
宽度的一半*/
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 divn
ame = document.all("testdiv");
//居中高度等于
页面内容高度减去DIV的高度 除以2
var to
pvalue = (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 {
dis
play:table-cell !important;
display:block;
position:
static !important;
position:relative;
overflow:hidden;
width:400px;
height:400px;
border:1px solid #000;
vert
ical-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://www.js-code
.COM/images/
LOGo.gif"></p>
</div>
</body>
</html>
脚本宝典总结
以上是脚本宝典为你收集整理的DIV以及图片水平垂直居中兼容多种浏览器全部内容，希望文章能够帮你解决DIV以及图片水平垂直居中兼容多种浏览器所遇到的问题。
如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。