本篇文章给大家带来的内容是关于css如何实现未知高度图像的垂直居中（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
CSS垂直居中 .container{ width:500px;/*装饰*/ height:500px; background:#B9D6FF; border: 1px solid #CCC; }垂直居中（table）
@@##@@
好了，我们看其CSS实现。凡是table能做到的，CSS都能做的，但各浏览器在CSS的差异比较大，因此要兼容它们难度很大。这涉及许多细节，各种流啊，display的表现效果与CSS hack，IE早些年搞了大堆的私有属性，这也有待我们深一步挖掘。我们先看最简单的实现，背景图片法
背景图片法
CSS垂直居中 .container { width:500px; height:500px; line-height:500px; background:#B9D6FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg) no-repeat center center; border:1px solid #f00; text-align: center;}垂直居中
CSS表达式法
司徒正美 CSS垂直居中 .container{ /*IE8与标准游览器垂直对齐*/ display: table-cell; vertical-align:middle; width:500px;/*装饰*/ height:500px; background:#B9D6FF; border: 1px solid #CCC; } .container img{ display:block;/*让其具备盒子模型*/ margin:0 auto; text-align:center; margin-top:expression((500 - this.height )/2);/*让IE567垂直对齐 */ }垂直居中（CSS表达式）
@@##@@
绝对定位法
立即学习“前端免费学习笔记（深入）”；
司徒正美 CSS垂直居中 div { /*IE8与标准游览器垂直对齐*/ display:table-cell; vertical-align:middle; overflow:hidden; position:relative; text-align:center; width:500px;/*装饰*/ height:500px; border:1px solid #ccc; background:#B9D6FF; } div p { +position:absolute; top:50% } img { +position:relative; top:-50%; left:-50%; }垂直居中(绝对定位)
@@##@@
display:inline-block法
司徒正美 CSS垂直居中 div { display:table-cell; vertical-align:middle; text-align:center; width:500px; height:500px; background:#B9D6FF; border: 1px solid #CCC; }垂直居中(inline-block法)
@@##@@
writing-mode法
CSS垂直居中 div{ width:500px; height:500px; line-height:500px; text-align:center; background:#B9D6FF; border:1px solid #f00; } div span{ height:100%9; writing-mode:tb-rl9; } div img{ vertical-align:middle }垂直居中(writing-mode法)
@@##@@
以上就是CSS如何实现未知高度图像的垂直居中（附代码）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1613373.html
微信扫一扫 
支付宝扫一扫 
