摘要:前两种方法称为大致居中,一般误差随高度的减小而减小,不过一般来说不怎么看得出来,除非你用调用来查看。随着的泛滥,很快老旧的浏览器也就成了古董,所以这个居中方法也挺不错,就是对于兼容性很高的项目,最好不要使用。
前两种方法称为大致居中,一般误差随高度的减小而减小,不过一般来说不怎么看得出来,除非你用javascript调用
offsetTop来查看。不然没有强迫症的比较难看出来。但是兼容性很好,尤其是table-cell的从IE6即可使用
1.使用table-cell处理图片间的关系
父元素使用display:table-cell; vertical:middle 子元素使用display:inline-block; vertical:middle;
即可简单使图片居中
2.使用line-height处理
父元素使用display:inline-block;height:300px;line-height:300px;vertical-align:middle;//这里的line-heiht要跟父元素大小一样; 子元素使用vertical-align:middle;
第三种称为绝对居中,不居中来找我,就是兼容性有点差,起码要IE9 才能兼容,一般的webkit也都没问题就是。随着ES6的泛滥,很快老旧的浏览器也就成了古董,所以这个居中方法也挺不错,就是对于兼容性很高的项目,最好不要使用。但是有问题的是,必须指定height,因为显然,这边计算的是下移50%的当前高度的Y轴。而前面两种方法不需要
3.使用translateY来垂直居中
父元素使用position:relative;height:400px; 子元素position:relative;transfrom:translateY(-50%);height:100px;top:50%;
以下是全部代码,自己找张demo.jpg做实验就可以
test a
-->
![]()
![]()
部分idea 参考自以下文章
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/111302.html
对于元素的水平居中,我根据我自己之前的一些学习来进行一些总结,如果有不对的地方,欢迎指正~ 一、让大小不固定的元素垂直居中 因为:表格的单元格的特别属性:垂直居中等; `div.parent { display: table-cell; vertica...
对于元素的水平居中,我根据我自己之前的一些学习来进行一些总结,如果有不对的地方,欢迎指正~ 一、让大小不固定的元素垂直居中 因为:表格的单元格的特别属性:垂直居中等; `div.parent { display: table-cell; vertica...
前两种方法称为大致居中,一般误差随高度的减小而减小,不过一般来说不怎么看得出来,除非你用javascript调用offsetTop来查看。不然没有强迫症的比较难看出来。但是兼容性很好,尤其是table-cell的从IE6即可使用 1.使用table-cel...
...神奇的东西!有了css3,js都可以少写很多!我之前也写过关于css3的文章,也封装过css3的一些小动画。个人觉得css3不难,但是很难用得好,用得顺手,最近我也在过一遍css3的一些新特性(不是全部,是我在工作上常用的,或者...
...神奇的东西!有了css3,js都可以少写很多!我之前也写过关于css3的文章,也封装过css3的一些小动画。个人觉得css3不难,但是很难用得好,用得顺手,最近我也在过一遍css3的一些新特性(不是全部,是我在工作上常用的,或者...
阅读 1391·2021-10-20 13:49
阅读 2136·2021-09-24 09:48
阅读 1676·2021-09-10 10:50
阅读 2243·2021-09-06 15:01
阅读 1050·2019-08-30 15:52
阅读 2592·2019-08-29 16:37
阅读 792·2019-08-29 10:55
阅读 2647·2019-08-26 12:14