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