# div垂直居中显示，背景不能点

本人小菜鸟一只，刚好需要用到这个，就刚好写了，主要是**transform: translate(-50%,-50%);**这个功能太强大了，好了，看下面

1、先来张效果图

2、新建两个div，一个包裹在外面，一个在里面

	 <div class="content">    				<!--背景-->
<div class="div"></div> 		<!--居中的div-->
</div>

3、就剩下写CSS了，话不多说，看图：

.content{
position: absolute;   /*这个要写,不然不会显示*/
width: 100%;
height: 100%;
background: rgba(167, 162, 162, 0.6); /*透明度用这个方法绝对省事，不然用position会继承给div*/
background-repeat: repeat; /*全部铺满,可以不用写*/
z-index: 1000;
}
.div{
position: absolute;
left: 50%;
top: 50%;
height: 300px;
width: 300px;
background: red;
border-radius: 20px;
transform: translate(-50%,-50%); /*就是这个让div居中的*/
z-index: 1002;
}