html5中让盒子居中,jquery让div盒子始终居中的方法

Document

$(function(){

//div盒子对象

var div = $('.box');

//初始化居中

go_center(div);

//浏览器有变动的时候居中

window.onresize = function(){

go_center(div);

}

function go_center(obj){

var clientW = $(window).width();//浏览器宽度

var clientH = $(window).height();//浏览器高度

var width = obj.width();//div对象的宽

var height = obj.height();//div对象的高

//设置对象的top、left值

obj.css({

left: (clientW-width)/2,

top: (clientH-height)/2,

});

}

//点击div以外的地方隐藏

$(document).click(function() {

div.hide();

});

//阻止事件冒泡

div.click(function(event) {

event.stopPropagation();

})

})

*{

padding: 0;

margin: 0;

}

.box{

background: red;

height: 200px;

width: 200px;

position: absolute;

}