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

Question

    <div id ="contract_template_select">

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

    </div>

Answer 1

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

Answer 2

如果已知盒子div的width 和 height, 可以试试div{&nbsp; &nbsp; position:fixed;&nbsp; &nbsp; left:50%;&nbsp; &nbsp; margin-left:- div的width的一半;&nbsp; &nbsp; top:50%;&nbsp; &nbsp; margin-top: - div的height的一半;}至于题主要的半透明黑色遮罩 可以使用::afterdiv::after{&nbsp; &nbsp; content: " ";&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; position: fixed;&nbsp; &nbsp; background: rgba(0,0,0,.3);&nbsp; &nbsp; top: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; z-index: 0;}居中的方法还有挺多的 可以参考&nbsp;《CSS制作水平垂直居中对齐》