vue css弹窗上下左右居中（自适应）

首先需要有一个大的div，包裹弹窗的全部内容，代码为：

position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);

这个div 的层级只要大于原页面的层级就可以了。设置透明度，是做灰色效果。
第二个div 是弹窗的具体位置，这里用绝对定位定位。

position: absolute;

width:80% ;
height: 80%;
top: 10%;
left: 10%;
background-color: blueviolet;

最后是效果图

css代码：

.big-div{
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background: rgba(0,0,0,0.5);
			z-index: 99;
		}
		.center{
			position: absolute;
			width:80% ;
			height: 80%;
			top: 10%;
			left: 10%;
			background-color: blueviolet;
		}

html 代码：

<div class="big-div">
	<div class="center">内容</div>
</div>