纯css完美地解决图片以及div垂直水平居中，兼容IE7.0、IE6.0、IE5.5、IE5.0、FF、Opera、Safari具体实现css 如下，感兴趣的朋友可以参考下哈
 

第一种：全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;/*注意这里必须是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控制，不漂浮（适用于做登陆页面）

复制代码

代码如下:

<%@ 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="http://www.jb51.net/images/logo.gif"></p>
</div>
</body>
</html> 

DIV以及图片水平垂直居中兼容多种浏览器的更多相关文章

  1. 关于div中图片水平垂直居中的问题

    最近在做一个项目,里面涉及到不固定尺寸要在div里面水平垂直居中显示 我没有用table布局,而是用了div+css,找了很久,终于在网上找到解决方案,特此记录备用 关键核心代码如下: <div ...

  2. 图片水平垂直居中（兼容IE6，IE7，firefox，opera，safari，其中图片可以是任何块元素）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 让图片在div盒子中水平垂直居中

    //调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...

  4. CSS制作图片水平垂直居中

    所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...

  5. 图文-水平垂直居中兼容ie6+

    图文-水平垂直居中兼容ie6+ 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  6. css实现图片水平垂直居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变

    今天有朋友问到我关于"iframe自适应高度"的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定.期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条.也就是 ...

  8. CSS 实现图片灰度效果 兼容各种浏览器

    CSS 实现图片灰度效果 兼容各种浏览器如360浏览器 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. ...

  9. 原生JavaScript拖动div兼容多种浏览器

    说句题外话,虽然博客园嵌入式氛围不行,Web前端氛围还是很好的.我又从 chinaunix 回来了. <html> <head> <script type="t ...

随机推荐

  1. HDOJ-1042 N!（大数乘法）

    http://acm.hdu.edu.cn/showproblem.php?pid=1042 题意清晰..简单明了开门见山的大数乘法.. 10000的阶乘有35000多位 数组有36000够了 # i ...

  2. 网易云课堂_C++开发入门到精通_章节4:运算符重载

    课时23运算符重载 运算符重载 重载赋值运算符 Person& Person::operator=(const Person& other) { //检查自赋值 if (this == ...

  3. Mule与其它web应用服务器的区别

    跟JBoss.Tomcat或其它web应用服务器相比,Mule有何不同?虽然他们有一些重要的相同点,不同点可以归结为你想达到的目标是什么.某些种类的应用对于Mule来说比较容易去编写.部署和管理,其它 ...

  4. Win8 App使用Listview的简单方法

    这是Win8 App神圣不可侵犯的头文件: <head> <meta charset="utf-8"> <title>ListViewExamp ...

  5. 【拆点费用流】【HDU1853】【 Cyclic Tour】

    题意: 有N个城市,M条单向路,Tom想环游全部城市,每次至少环游2个城市,每个城市只能被环游一次.由于每条单向路都有长度,要求游遍全部城市的最小长度. // 给定一个有向图,必须用若干个环来覆盖整个 ...

  6. 使用UTL_SMTP发送中文电子邮件

    就是在原有TOM源码的基础上修改utl_smtp.write_data中,将输出内容进行一下数据转换,这样可以保证中文输出不会出现乱码 ----------------------------- cr ...

  7. fragment之间的信息交互——onActivityResult()不经过Activity

    1.本文讲述如何fragment与fragment之间互传信息,不用使用Activity的onActivityResult()方法 核心思想:FirstFragment获取到SecondFragmen ...

  8. mysql性能优化学习笔记（1）优化目的、方向及数据库准备

    前言: 最近参加面试,问到了很多关于mysql的优化方面的问题,回答的不是很好,也是因为原先做的项目流量不是很大,所以对mysql优化不是太了解,所以趁着周末,恶补一下. 本文来源于慕课网sqlerc ...

  9. PBM文件格式

    PBM是一种单色位图文件,常用于打印机,由于需要下面对PBM文件格式进行分析. 每个文件的开头两个字节(ASCII码)作为文件描述子,可以理解为文件头.具体如下: 头 类型 编码 P1 位图 ASCI ...

  10. Javascript 之内置对象

    JS提供了11种引用类型:Object.Array.Date.Function.Error.RegExp.Math.Number.String.Boolean.Globle.其中包括了三种基本包装类型 ...