使用transform：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>H5对话框水平垂直居中</title>
<style type="text/css">
.app-pop {display:none;position: fixed; 100%;top: 0;bottom: 0;right: 0;background-color: rgba(0,0,0,.3);overflow: auto;}
.app-pop-inner {position:absolute;left:50%;top:50%; 328px;height:380px;border-radius: 6px;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);background: green;}
</style>
</head>
<body>
<button id="btn">打开对话框</button>
<div id="pop" class="app-pop">
<div class="app-pop-inner"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
$('#btn').on('click', function() {
$('#pop').css({display:'block'});
});
</script>
</body>
</html> 
使用margin：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>H5对话框水平垂直居中</title>
<style type="text/css">
.app-pop {display:none;position: fixed; 100%;top: 0;bottom: 0;right: 0;background-color: rgba(0,0,0,.3);overflow: auto;}
.app-pop-inner {position:absolute;top: 0; bottom: 0;left: 0;right: 0;margin: auto; 328px;height:380px;border-radius: 6px;background: green;}
</style>
</head>
<body>
<button id="btn">打开对话框</button>
<div id="pop" class="app-pop">
<div class="app-pop-inner"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
$('#btn').on('click', function() {
$('#pop').css({display:'block'});
});
</script>
</body>
</html> 使用display：flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>H5对话框水平垂直居中</title>
<style type="text/css">
.app-pop {color: #ffffff; 100%;height: 0;position: absolute;overflow: hidden;top: 0;left: 0px;display: flex;display: -webkit-flex;align-items: center;justify-content: center;}
.app-pop-inner { 328px;height:380px;border-radius: 6px;background: green;}
</style>
</head>
<body>
<button id="btn">打开对话框</button>
<div id="pop" class="app-pop">
<div class="app-pop-inner"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#btn').on('click', function() {
$('#pop').css({height:'100%'});
});
</script>
</body>
</html>备注：欢迎加入web前端求职招聘qq群：668352707