手机端扣扣浏览器图片居中_DIV以及图片水平垂直居中兼容多种浏览器

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

复制代码代码如下:

My JSP

#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; }

this is a test

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

复制代码代码如下:

My JSP

function cen(){

var divname = document.all("testdiv");

//居中高度等于页面内容高度减去DIV的高度 除以2

var topvalue = (document.body.clientHeight - divname.clientHeight)/2;

divname.style.marginTop = topvalue;

}

//页面大小发生变化时触发

window.onresize = cen;

DIV居中演示

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

复制代码代码如下:

其他的方法：

纯css完美地解决图片在div内垂直水平居中，兼容IE7.0、IE6.0、IE5.5、IE5.0、FF、Opera、Safari

以下是程序代码

复制代码代码如下:

.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%;

}