CSS未知高度垂直居中
最近群里这个问题比较热门,决定把我收藏的方法分享大家。在开始时,我们先看一下万能的table实现。
<! doctype html> < html lang="en"> < head > < meta charset="utf-8" /> < meta content="IE=8" http-equiv="X-UA-Compatible"/> < title >司徒正美 CSS垂直居中</ title > < style type="text/css"> .container{ width:500px;/*装饰*/ height:500px; background:#B9D6FF; border: 1px solid #CCC; } </ style > </ head > < body > < h1 >垂直居中(table)</ h1 > < div class='container'> < table width="100%" height="100%"> < tr > < td align="center" valign="middle"> < img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" /> </ td > </ tr > </ table > </ div > </ body > </ html > |
好了,我们看其CSS实现。凡是table能做到的,CSS都能做的,但各浏览器在CSS的差异比较大,因此要兼容它们难度很大。这涉及许多细节,各种流啊,display的表现效果与CSS hack,IE早些年搞了大堆的私有属性,这也有待我们深一步挖掘。我们先看最简单的实现,背景图片法——
背景图片法
<! doctype html> < html > < head > < title >司徒正美 CSS垂直居中</ title > < style type="text/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; } </ style > </ head > < body > < h1 >垂直居中(背景图片法)</ h1 > < div class="container"> </ div > </ body > </ html > |
CSS表达式法
< html lang="en"> < head > < meta charset="utf-8" /> < meta content="IE=8" http-equiv="X-UA-Compatible"/> < title >司徒正美 CSS垂直居中</ title > < style type="text/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垂直对齐 */ } </ style > </ head > < body > < h1 >垂直居中(CSS表达式)</ h1 > < div class="container"> < img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" /> </ div > </ body > </ html > |
绝对定位法
<! doctype html> < html lang="en"> < head > < meta charset="utf-8" /> < meta content="IE=8" http-equiv="X-UA-Compatible"/> < title >司徒正美 CSS垂直居中</ title > < style type="text/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%; } </ style > </ head > < body > < h1 >垂直居中(绝对定位)</ h1 > < div class="container"> < p > < img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" /> </ p > </ div > </ body > </ html > |
display:inline-block法
<! doctype html> < html lang="en"> < head > < meta charset="utf-8" /> < meta content="IE=8" http-equiv="X-UA-Compatible"/> < title >司徒正美 CSS垂直居中</ title > < style type="text/css"> div { display:table-cell; vertical-align:middle; text-align:center; width:500px; height:500px; background:#B9D6FF; border: 1px solid #CCC; } </ style > <!--[if IE]> <style type="text/css"> i { display:inline-block; height:100%; vertical-align:middle } img { vertical-align:middle } </style> <![endif]--> </ head > < body > < h1 >垂直居中(inline-block法)</ h1 > < div class="container"> < i ></ i > < img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" /> </ div > </ body > </ html > |
writing-mode法
<! doctype html> < html lang="en"> < head > < meta charset="utf-8" /> < meta content="IE=8" http-equiv="X-UA-Compatible"/> < title >司徒正美 CSS垂直居中</ title > < style type="text/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-rl\9; } div img{ vertical-align:middle } </ style > </ head > < body > < h1 >垂直居中(writing-mode法)</ h1 > < div class="container"> < span > < img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" /> </ span > </ div > </ body > </ html > |
记得淘宝也搞一个font-size法,但我觉得上下差异比较大,就不收录了。怿飞的博客亦提到过一韩国人有个巧妙的实现,但日久链接失效了,谁收藏了也请提供一下。
新发现的逆天方法,使用button 标签做容器
如果您觉得此文有帮助,可以打赏点钱给我支付宝1669866773@qq.com ,或扫描二维码


机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
2009-07-08 利用rails与blueprint进行迅敏开发(第一部分)