使用absolute绝对定位，实现垂直水平居中

使用百分比来绝对定位一个元素，并配合使用translate，将元素移动定位居中。

<style>
.mask{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.5)
}
.content{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:3rem;
height:2rem;
background:#fff;
}
</style>

<div class="mask">
  <div class="content">...</div>  
</div>

实现效果图：