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

Question

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

Answer 1

<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 2

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