css中fixed如何定位在屏幕的正中间，并在周围生成一个半透明的黑色遮罩？？

Question

    <div id ="contract_template_select">
        <div id="template_title">选择模板</div>

    </div>

Answer 1

谢邀
如果已知盒子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制作水平垂直居中对齐》

Answer 2

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

.mask {
   position: fixed;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, .3)
}
.dialog {
   // 宽高必须要声明，对于宽高不固定这个方法不适用
   width: 200px;
   height: 200px;
   border-radius: 5px;
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
}

Answer 3

    position: fixed;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    box-shadow: 0 0 2px 12px rgba(0,0,0,0.5); // 参数随便改

Answer 4

<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小
 }

Answer 5

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