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

最新推荐文章于 2024-03-11 18:35:59 发布

白白很白

最新推荐文章于 2024-03-11 18:35:59 发布

阅读量336

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/weixin_41606652/article/details/82914112

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本人小菜鸟一只，刚好需要用到这个，就刚好写了，主要是**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;
    }