摘要：之前看了张大大的博客总结一下我对和的一些认知。站在巨人的肩膀上学习，再次谢谢张大大阮大大的各种分享。
对于元素的水平居中，我根据我自己之前的一些学习来进行一些总结，如果有不对的地方，欢迎指正~
一、让大小不固定的元素垂直居中
因为：表格的单元格的特别属性：垂直居中等；
`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 上排除.
以上是我的学习总结，希望大家坚持，加油，你不是一个人在奋斗。
站在巨人的肩膀上学习，再次谢谢张大大阮大大的各种分享。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/54446.html
对于元素的水平居中，我根据我自己之前的一些学习来进行一些总结，如果有不对的地方，欢迎指正~ 一、让大小不固定的元素垂直居中 因为：表格的单元格的特别属性：垂直居中等； `div.parent { display: table-cell; vertica...
垂直居中相关知识总结 前言 工作中用到了很多关于垂直居中相关的知识之前，在SF上提问了个问题CSS关于垂直居中，大家有没有什么比较好的建议。非常感谢各位前辈对我的帮助，前辈们给的答案都非常多也各式各样，我觉...
垂直居中相关知识总结 前言 工作中用到了很多关于垂直居中相关的知识之前，在SF上提问了个问题CSS关于垂直居中，大家有没有什么比较好的建议。非常感谢各位前辈对我的帮助，前辈们给的答案都非常多也各式各样，我觉...
...100px; padding: 20px; width: 50%; white-space: nowrap; } 示例代码关于line-height，有许多需要了解和注意的地方，想详细了解为什么这么这种方法可以实现垂直居中，可以参见这篇文章 多行垂直居中 设置padding同样可以使多行文本居中，...
前两种方法称为大致居中，一般误差随高度的减小而减小，不过一般来说不怎么看得出来，除非你用javascript调用offsetTop来查看。不然没有强迫症的比较难看出来。但是兼容性很好，尤其是table-cell的从IE6即可使用 1.使用table-cel...
阅读 3247·2021-11-23 09:51
阅读 2812·2021-11-15 11:37
阅读 1130·2021-10-22 09:53
阅读 975·2021-10-09 09:56
阅读 456·2019-08-30 13:47
阅读 1772·2019-08-30 12:55
阅读 1215·2019-08-30 12:46
阅读 777·2019-08-30 10:51
