资讯专栏INFORMATION COLUMN

关于css 的垂直居中

icattlecoder / 1068人阅读

摘要:之前看了张大大的博客总结一下我对和的一些认知。站在巨人的肩膀上学习,再次谢谢张大大阮大大的各种分享。

对于元素的水平居中,我根据我自己之前的一些学习来进行一些总结,如果有不对的地方,欢迎指正~

一、让大小不固定的元素垂直居中

因为:表格的单元格的特别属性:垂直居中等;
`div.parent {

   display: table-cell;
   vertical-align: middle;
   height: 200px;

}
div.parent img{
}`

属性line-height的设置
`div.parent{

   height: 100px;
   line-height:100px;

}
div.parent img{

   vertical-align:middle;

}`

绝对定位 + margin:auto;
div.parent{

   height: 300px;
   width: 300px;
   position: relative;
   background-color: red;

}
div.parent img{

   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   margin: auto;

}
ps.第三种方法我很久以前也有用过,一开始我简单的认为是:由于上下左右都设置为0了所以 margin auto后元素自适应居中,于是某一天我看到了张鑫旭大大的博客才就知道了为什么:引用张大大的话:

1.当一个绝对定位元素,其对立定位方向属性同时有具体定位数值的时候,流体特性就发生了;
2.因为left/right同时存在,所以宽度自适应于包含块的padding box宽度,也就是随着包含块padding box的宽度变化,包含块宽度也会跟着一起变。具有流体特性绝对定位元素的margin:auto的填充规则和普通流体元素一模一样:
如果一侧定值,一侧auto,auto为剩余空间大小;如果两侧均是auto, 则平分剩余空间;

二、大小固定的元素垂直居中

对于大小固定的元素,上面的几个方法也是可以用的。

1.绝对定位 + margin:-元素的 宽度&&高度

    div.parent{
        height: 200px;
        width: 200px;
        position: relative;
        background-color: red;
    }
    div.parent img{
        width: 100px;
        height: 100px;
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-50px;
        margin-top:-50px;
    }
        //定位额度时候以元素的右上角为参考点,所以我们需要负值的margin把相差的元素的一半的宽高大小的距离拉回来

对于固定宽高的还有其它很多方法啦,我就不一一列举了。

之前看了张大大的博客,总结一下我对line-heightvertical-align的一些认知 。vertical-align 的几个属性值baseline,bottom,top,middle 等跟文字的基线相关联,而line-height 是无论大小都与文字垂直居中的,比如line-height与高度一致可以设置文字居中,所以,一样的道理,vertical-align 跟line-height 可以联手设置垂直居中。

我觉得在网页的布局中,如果出现任何难理解的奇怪的现象,都可以先从 line-height 和vertical-align 上排除.

以上是我的学习总结,希望大家坚持,加油,你不是一个人在奋斗。

站在巨人的肩膀上学习,再次谢谢张大大阮大大的各种分享。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/112805.html

相关文章

  • 关于css 垂直居中

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

    caspar 评论0 收藏0
  • 垂直居中相关知识总结

    垂直居中相关知识总结 前言 工作中用到了很多关于垂直居中相关知识之前,在SF上提问了个问题CSS关于垂直居中,大家有没有什么比较好建议。非常感谢各位前辈对我帮助,前辈们给答案都非常多也各式各样,我觉...

    Labradors 评论0 收藏0
  • 垂直居中相关知识总结

    垂直居中相关知识总结 前言 工作中用到了很多关于垂直居中相关知识之前,在SF上提问了个问题CSS关于垂直居中,大家有没有什么比较好建议。非常感谢各位前辈对我帮助,前辈们给答案都非常多也各式各样,我觉...

    GeekGhc 评论0 收藏0
  • css居中一点总结

    ...100px; padding: 20px; width: 50%; white-space: nowrap; } 示例代码关于line-height,有许多需要了解和注意地方,想详细了解为什么这么这种方法可以实现垂直居中,可以参见这篇文章 多行垂直居中 设置padding同样可以使多行文本居中,...

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

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

    simpleapples 评论0 收藏0

发表评论

0条评论

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