遮罩层中图片绝对居中的两种方法，点击空白处关闭遮罩层的两种方法

居中方法一：flex布局

.qrcode-show{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: black;
	opacity: 0.8;
	display: flex;
	flex-wrap:wrap;
	justify-content: center;
	align-items: center;
}

.qrcode-show .qrcode-show-img{
	display: block;
	width: 50%;
	max-height: 100%;
	margin-bottom: 10px;
}
.qrcode-show .tips{
	width: 90%;
	margin:0 auto;
	font-size: 19px;
	text-align: center;
	color: white;
}

<section class="qrcode-show">
	<img src="qrcode.jpg" alt="二维码" class="qrcode-show-img">
	<div class="tips">关注公众号，获得更多资讯</div>
</section>

居中方法二：transform偏移

.qrcode-show{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: black;
	opacity: 0.8;
}

.qrcode-show .qrcode-show-img{
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60%;
	max-height: 100%;
}

<section class="qrcode-show hide">
	<img src="qrcode.jpg" alt="二维码" class="qrcode-show-img">
</section>

点击空白处关闭遮罩层方法一：设置点击不关闭区域

			// 点击空白区域关闭遮罩层
			$(".qrcode-show").click(function(e){
	            var _con = $('.qrcode-show-img');   // 设置目标区域[点击不会关闭遮罩层的区域]
	            if(!_con.is(e.target) && _con.has(e.target).length === 0){
	                $(".qrcode-show").addClass("hide");
	                // 解除禁止滚动
	                $("html,body").removeClass("overHidden");
	            }
	        });

点击空白处关闭遮罩层方法二：阻止冒泡方法

			// 点击空白区域关闭遮罩层，通过阻止冒泡事件实现
            $(".qrcode-show").click(function(){
            	alert("点击空白区域");
            	$(".qrcode-show").addClass("hide");
                // 解除禁止滚动
                $("html,body").removeClass("overHidden");
            });
            $('.qrcode-show-img').click(function(){
            	alert("点击图片");
            	return false;
            });

链接: 示例代码下载