当前位置: 首页 > Web前端 > CSS

-div-居中问题总结

时间:2023-03-30 22:35:01 CSS

今天看到一道面试题,如何让一个div水平和垂直居中。当时想到了绝对定位+top和left,但是忘了通过margin来修正,于是拿出权威的css指南,重新温习了一下定位的知识,写了个总结:1.水平居中

先是位置绝对定位,然后巧妙的把toprightbottomleft设置为0,最后设置margin为auto,浏览器会自动div的上下左右等间距,达到水平和垂直居中的目的。方法二:
top和left都定位为上层的点div的左上角,所以都设置为50%,相当于把div左上角的点定位到浏览器的中间,然后通过margin-top和margin-left修正位置.方法三:
原理和第二种方法一样,不同的是使用了css3中的transform属性来矫正位置。如果还有其他常用的方法,欢迎在文章下方留言,谢谢