关于css 的垂直居中

icattlecoder 发布于2019-08-29 13:56 / 1323人阅读

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

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

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

因为：表格的单元格的特别属性：垂直居中等；
`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-height 和 vertical-align的一些认知。vertical-align 的几个属性值baseline，bottom，top，middle 等跟文字的基线相关联，而line-height 是无论大小都与文字垂直居中的，比如line-height与高度一致可以设置文字居中，所以，一样的道理，vertical-align 跟line-height 可以联手设置垂直居中。

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

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

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

GPU云服务器云服务器垂直居中实现垂直居中水平垂直居中文字垂直居中

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

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

关于css 的垂直居中

摘要：之前看了张大大的博客总结一下我对和的一些认知。站在巨人的肩膀上学习，再次谢谢张大大阮大大的各种分享。对于元素的水平居中，我根据我自己之前的一些学习来进行一些总结，如果有不对的地方，欢迎指正~ 一、让大小不固定的元素垂直居中因为：表格的单元格的特别属性：垂直居中等； `div.parent { display: table-cell; vertical-align...

caspar 2019-08-02 15:58 评论0 收藏0
垂直居中相关知识总结

摘要：垂直居中相关知识总结前言工作中用到了很多关于垂直居中相关的知识之前，在上提问了个问题关于垂直居中，大家有没有什么比较好的建议。垂直居中相关知识总结前言工作中用到了很多关于垂直居中相关的知识之前，在SF上提问了个问题CSS关于垂直居中，大家有没有什么比较好的建议。非常感谢各位前辈对我的帮助，前辈们给的答案都非常多也各式各样，我觉得有必要把大家的回答总结一下。方法总结一、绝对定...

Labradors 2019-08-19 17:31 评论0 收藏0
垂直居中相关知识总结

摘要：垂直居中相关知识总结前言工作中用到了很多关于垂直居中相关的知识之前，在上提问了个问题关于垂直居中，大家有没有什么比较好的建议。垂直居中相关知识总结前言工作中用到了很多关于垂直居中相关的知识之前，在SF上提问了个问题CSS关于垂直居中，大家有没有什么比较好的建议。非常感谢各位前辈对我的帮助，前辈们给的答案都非常多也各式各样，我觉得有必要把大家的回答总结一下。方法总结一、绝对定...

GeekGhc 2019-08-01 15:02 评论0 收藏0
对css居中的一点总结

摘要：为了更好的加深对居中的理解，搜集和阅读相关资料，发现不错的文章将其整理出来。在学习前端的过程中，发现元素和文本的水平居中和垂直居中，是经常会出现的问题，在实际工作中也会经常碰到。居中的技巧有很多，但在编写代码的过程中，发现有时候技巧管用，有时候不管用，于是就将每个知道的方案都试一遍，找到合适的。这种情况究其原因是对居中的认识不够深入，只是停留在实现需求的水平上。为了更好的加深对居中的...

BenCHou 2019-08-29 11:17 评论0 收藏0
关于Css的垂直居中的一些方法

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

simpleapples 2019-08-29 10:55 评论0 收藏0