在一些页面中，我们总会遇到一些弹窗不居中的时候，还要根据浏览器的大小来调整弹窗的弹出位置，
之前我也遇到这样的问题，现在我把我知道的呈现给大家
css样式
.windowBox{
width:500px;
}
.mid-tanBox{
position: fixed; top: 50%; left: 50%; margin-left: -250px; background: #fff; border:1px solid red; display:none
}
html代码
<div class='windowBox'>
<div class ="mid-tanBox"></div>
<div class="jclick">弹窗</div>
</div>
jQuery代码自动：
$(".jclick").click(function(i){
var height = $(".mid-tanBox").height();
var eheight = height/2;
$(".mid-tanBox").eq(i).css("margin-top","-eheight");
})
额外：-JS
<style>
*{margin:0px;padding:0px}
.all-tanch{ background:blue; position: fixed; display:none; color: #fff; padding:50px;}
.wraper{ width:600px; background:#333; color: #fff; position:relative; margin:30px;}
.sonone{background:red; display:none;position:absolute;}
</style>
<Script type="text/javascript" src="jquery.js"></script>
<!--针对浏览器窗口垂直居中-->
<Script type="text/javascript">
function popup(poName){
var scrollHeight = $(document).scrollTop();//获取当前窗口距离页面顶部高度
var windowHeight = $(window).height();//获取当前窗口高度
var windowWidth = $(window).width();//获取当前窗口宽度
var popupHeight = popupName.height();//获取弹出层高度
var popupWeight = popupName.width();//获取弹出层宽度
alert(windowHeight);
posiTop = (windowHeight)/2;
posiLeft = (windowWidth)/2;
poName.css({"left": posiLeft + "px","top":posiTop + "px","display":"block"});//设置position
}
$(function(){
$(".clickme01").click(function(){
popup($(".all-tanch"));
$(".wraper").hide();
});
});
</script>
<!--针对当前层 窗口垂直居中-->
<Script type="text/javascript">
function middleModle(selectorName){ //参数： 定义的class或ID，，其他
var fatherHeight = $(".wraper").height();//获取当前窗口高度
var fatherWidth = $(".wraper").width();//获取当前窗口宽度
var tanHeight = selectorName.height();//获取弹出层高度
var tanWeight = selectorName.width();//获取弹出层宽度
var poTop = (fatherHeight - tanHeight)/2;
var poLeft = (fatherWidth - tanWeight)/2;
selectorName.css({"left": poLeft + "px", "top":poTop + "px", "display":"block"});//设置position位置
}
$(function(){
$(".clickme02").click(function(){
$(".wraper").show();
middleModle($(".sonone"));
});
});
</script>
<input class="clickme01" type="button" value="针对浏览器窗口垂直居中"/>
<input class="clickme02" type="button" value="针对当前窗口垂直居中"/>
<div class="all-tanch">
整个弹窗
</div>
<div class="wraper">
我是父级层--
<div class="sonone">大家好，我是弹窗，没有样式自己凑合着看吧！！！！</div>
</div>
