资讯专栏INFORMATION COLUMN

关于Css的垂直居中的一些方法

simpleapples / 791人阅读

摘要:前两种方法称为大致居中,一般误差随高度的减小而减小,不过一般来说不怎么看得出来,除非你用调用来查看。随着的泛滥,很快老旧的浏览器也就成了古董,所以这个居中方法也挺不错,就是对于兼容性很高的项目,最好不要使用。

前两种方法称为大致居中,一般误差随高度的减小而减小,不过一般来说不怎么看得出来,除非你用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

相关文章

  • 关于css 垂直居中

    对于元素水平居中,我根据我自己之前一些学习来进行一些总结,如果有不对地方,欢迎指正~ 一、让大小不固定元素垂直居中 因为:表格单元格特别属性:垂直居中等; `div.parent { display: table-cell; vertica...

    caspar 评论0 收藏0
  • 关于css 垂直居中

    对于元素水平居中,我根据我自己之前一些学习来进行一些总结,如果有不对地方,欢迎指正~ 一、让大小不固定元素垂直居中 因为:表格单元格特别属性:垂直居中等; `div.parent { display: table-cell; vertica...

    icattlecoder 评论0 收藏0
  • 关于Css垂直居中一些方法

    前两种方法称为大致居中,一般误差随高度减小而减小,不过一般来说不怎么看得出来,除非你用javascript调用offsetTop来查看。不然没有强迫症比较难看出来。但是兼容性很好,尤其是table-cell从IE6即可使用 1.使用table-cel...

    freewolf 评论0 收藏0
  • 前端-CSS3&H5

    ...神奇东西!有了css3,js都可以少写很多!我之前也写过关于css3文章,也封装过css3一些小动画。个人觉得css3不难,但是很难用得好,用得顺手,最近我也在过一遍css3一些新特性(不是全部,是我在工作上常用,或者...

    Hydrogen 评论0 收藏0
  • 前端-CSS3&H5

    ...神奇东西!有了css3,js都可以少写很多!我之前也写过关于css3文章,也封装过css3一些小动画。个人觉得css3不难,但是很难用得好,用得顺手,最近我也在过一遍css3一些新特性(不是全部,是我在工作上常用,或者...

    xiaolinbang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<