css实现绝对定位元素居中

Posted 2020-06-14

前端我们时常需要封装一些弹出框,这些弹出框大小都不能确定,多半是用js实现居中.

现在有了css3可以不用js了.

.box{
                background-color: blueviolet;
                width: 50%;
                height: 40%;
                position: absolute;
                left: 50%;
                top: 50%;
                -webkit-transform: translate(-50%,-50%); 
                -ms-transform: translate(-50%,-50%); 
                transform: translate(-50%,-50%);
            }

<div class="box"></div>

这个时候随意改变浏览器的尺寸,元素大小随之变化,但是始终是居中的.

我只想说一句有了css3,前端酷毙了.一串css3代码,可以省掉几百行js代码,还比js的bug少.