弹出框居中显示

function showdialog() {
					document.getElementsByTagName('body')[0].scrollTop = 0;
				var bh = $("body").height(); 
               var bw = $("body").width(); 
               $("#zzdiv").css({ 
               height:bh, 
               width:bw, 
               display:"block" 
              });
				document.getElementById("boxdiv").style.display = "block";
				document.getElementById("tsdialog").textContent = "您确定选中的运单审核通过？"

				
			}

　　

.boxdiv{ display: none; width: 300px; height: auto; background: #FFFFFF; top: 50%; left: 50%; margin-left: -150px;margin-top: -85px; position: fixed; z-index:10001;}
.boxheader{ width: 300px; height: 40px; line-height: 40px; color: #FFFFFF; font-size: 16px; background: #4A9900; text-indent: 1em;}
.boxcontent{ color: #333333; font-size: 14px; line-height: 25px;  text-align: center; margin-top: 10px; margin-top: 30px; padding: 0 20px 0 20px;}
.boxbtn{ width: 300px; height: 40px; line-height: 40px; font-size: 12px; border-top: 1px #CCCCCC solid; margin-top: 30px;}
.boxbtn a{ color: #333333; text-decoration: none;}
.qxbtn{ display: block; float: left; width: 149px;border-right: 1px #CCCCCC solid; text-align: center; } 
.surebtn{display: block; float: right; width: 149px; text-align: center; }
.black{display: none;  width:100%; height:100%;position: absolute; top: 0; left: 0; background: #888; opacity: 0.5;-webkit-opacity: 0.5; -moz-opacity: 0.5;z-index:10000}

　　

<div class="boxdiv" id="boxdiv">
			<div class="boxheader">提示</div>
			<div class="boxcontent" id="tsdialog"></div>
			<div class="boxbtn">
				<a href="#" class="qxbtn" onclick=" clicksure()">取消</a>
				<a href="#" class="surebtn" id="surebtn" onclick=" clicksure()">确定</a>
			</div>
		</div>
		<div class="black" id="zzdiv" style="z-index: 100;"></div>