欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS垂直居中方法整理_html/css_WEB-ITnose

程序员文章站 2022-04-22 12:22:36
...
CSS定位中常常用到垂直居中,比如覆盖层上的弹框。

兼容性比较好的方法:

Hello World!

这个方法只适用于已知宽高的块,因为要设置负边距来修正。
如果是未知尺寸的块,可以使用以下方法:

Hello World!

原因是,绝对定位的布局取决于三个因素,一个是元素的位置,一个是元素的尺寸,一个是元素的margin值。没有设置尺寸和 margin 的元素会自适应剩余空间,位置固定则分配尺寸,尺寸固定边会分配 margin,都是自适应的。

IE7- 的渲染方式不同,渲染规则也不一样,他不会让定位元素去自适应。

现在有了CSS3,就又有新招数了:

Hello World!

就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的,和第一个方法思路类似。