css实现弹窗上下左右居中且背景透明锁定窗口效

<div class="box">
	<div class="boxs">
	    <!-- 白色弹窗 -->
	</div>
</div>

html, body {
     width: 100%;
     height: 100%;
 }
 .box {
     display: none;
     width: 100%;
     height: 100%;
     position: fixed;
     left:0;
     :0;
     background-color:rgba(0,0,0,0.5);
 }
 .boxs {
     width: 400px;
     height: 300px;
     background: #fff;
     box-shadow: 1px 7px 18px 0px rgba(84, 115, 128, 0.11);
     border-radius: 4px;
     cursor: pointer;
     position: absolute;
     left: 50%;
     : 50%;
     margin-: -150px;
     margin-left: -200px;
 }