最近一直在写弹框的样式，对于不同的宽高的图片还需不断的修改css的具体数，太过麻烦就用js获取了图片的自身宽高，然后js实现水平和垂直的居中(原创)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹框</title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<script src="js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
</head>
<body> 
<style type="text/css">

.boom{width: 100%;height: 100%;position: fixed;background: rgba(0,0,0,5);top: 0;left: 0;bottom: 0;right: 0;}

.boombox{text-align: center;position: relative;margin: 0 auto;}

.boombox a{display: block;}

.boombox span{position: absolute;top: 0px;right: 0px;color: #fff;width:30%;height: 30px;display: block;text-align: center;cursor: pointer;}

</style>
<div class="boom">
<div class="boombox">
<a href="http://www.bazxedu.com/zixun.php">
<img  src="picture/xltc.png"/>
</a>
<span></span>
</div>
</div> 
<script type="text/javascript">

$(function(){

//弹框通用js start

$(".boombox a img").attr("class","tk");//给弹框图片加上tk标签

var  img = document.getElementsByClassName('tk')[0];//获取到这个图片

var  nWidth =img.naturalWidth ;    //图片真实宽度

                var  nHeight =img.naturalHeight ;  //图片真实高度

var  bh = (window.innerHeight-nHeight)/2; 

  $(".boombox").css({"margin-top":bh,"width":nWidth});//弹框位置居中

   $(".boombox span").click(function(){

     $(".boom").slideUp(500);//点击关闭

  })

   //弹框通用js end

})

   

</script>
</body>
</html>