弹出层居中定位的实现

HTML部分

<div class="shadow" v-show="showShadow">
　　<div class="shadow-main">
	<h3>温馨提示</h3>
	<p>您来晚啦！本商品太过抢手！明天早点来哦~</p>
	<button class="choise-shadow" @click="off()">确 定</button>
　　</div>
</div>

　　

css部分实现方法

.shadow为底部黑色半通明遮罩层

.shadow-main为内容部分

.shadow{
	z-index: 99; 
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.7);
	box-sizing: border-box;
	display: ;
}
.shadow-main{ 
	padding: 0rem 0 0.8rem 0; 
	text-align: center; 
	position: absolute; 
	top:45%;
	left:50%; 
	transform:translate(-50%,-50%);
	width: 76%;
	background: url(../img/shadow_bg.png) no-repeat center;
	background-size: 100% 100%;
}