謝邀
如果已知盒子div的width 和 height, 可以試試

div{
    position:fixed;
    left:50%;
    margin-left:- div的width的一半;
    top:50%;
    margin-top: - div的height的一半;
}

至于題主要的半透明黑色遮罩 可以使用::after

div::after{
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0,0,0,.3);
    top: 0;
    left: 0;
    z-index: 0;
}

居中的方法還有挺多的 可以參考 《CSS制作水平垂直居中對(duì)齊》

    position: fixed;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    box-shadow: 0 0 2px 12px rgba(0,0,0,0.5); // 參數(shù)隨便改

<div class="mask">
  <div class="dialog"></div>
</div>

.mask {
   position: fixed;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, .3)
}
.dialog {
   // 寬高必須要聲明，對(duì)于寬高不固定這個(gè)方法不適用
   width: 200px;
   height: 200px;
   border-radius: 5px;
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
}

<div class='center-block'>
   <span class='Hello World'>
</div>

居中顯示：
1.如果div的寬高已知

.center-block{
    position:fixed;
    left:50%;
    top:50%;
    width:200px;
    height:100px;
    margin-left:-100px;
    margin-top: -50px;
}

2.如果div的寬度未知

.center-block{
    position:fixed;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
}

至于陰影遮罩

.center-block{
  z-index:3   
}
.center-block:after{
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.5);
    z-index: 2;   //z-index比div小
 }

postion:fixed;
left: 50% - 盒子框都的一半;
height:屏幕高度的一半 - 盒子高的一半  用JS獲取就行
陰影可以為box-shadow  或者text-shadow