H5W3
当前位置:H5W3 > CSS3 > 正文

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

本人小菜鸟一只,刚好需要用到这个,就刚好写了,主要是**transform: translate(-50%,-50%);**这个功能太强大了,好了,看下面
1、先来张效果图
# div垂直居中显示,背景不能点
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;
}

未经允许不得转载:H5W3 » # div垂直居中显示,背景不能点

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址