网站首页
高清电影
无损音乐
游戏攻略
电脑教程
破解资源
站长资源
软件下载
css 实现文字垂直居中
(编辑：jimmy 日期: 2024/9/21 浏览：
2
)
分两种情况：
fix height：
即垂直居中的元素高度已知，这个比较简单，也不需要额外的辅助元素。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="cache-control" content="no-cache" /> <style> <!-- html, body { height: 100%; margin: 0; padding: 0; } body { position: relative; } #div { background: blue; color: #fff; position: absolute; top: 50%; left: 50%; height: 240px; width: 240px; margin: -120px 0 0 -120px; } --></style> </head> <body> <div id="div"> i'm Mr. Middle. </div> </body> </html>
提示：您可以先修改部分代码再运行
variable height：
居中元素高度可变，这个需要额外的一个wrapper元素，用table-cell的方式来模拟表格的居中实现，当然，早期的ie又是另一招，具体可见代码。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="cache-control" content="no-cache" /> <style> <!-- html, body { height: 100%; margin: 0 auto; padding: 0; } body { position: relative; display: table; } #wrapper { display: table-cell; vertical-align: middle; text-align: middle; } #div { background: blue; color: #fff; } * html #wrapper, *+html #wrapper { position: absolute; top: 50%; } * html #div, *+html #div { position: relative; top: -50%; } --></style> </head> <body> <div id="wrapper"> <div id="div"> i'm Mr. Middle. i'm Mr. Middle. i'm Mr. Middle. </div> </div> </body> </html>
提示：您可以先修改部分代码再运行
上一篇：
让CSS代码更具有易维护性
下一篇：
css overflow与text-indent:-999em 字体隐藏
最新资源
《谭维维 30首经典流行歌曲精选辑 2CD》[WAV/分
《赵传 出道三十年全新大碟 你过得还好吗》[WAV
《发烧四大天王 磁性男声HiFi发烧碟 2CD》[WAV/
黑神话悟空上品鼠司空精魄获取方法一览|上品鼠司
《真三国无双：起源》新情报将于9月26日公开，实机
黑神话悟空上品鼠禁卫精魄获取方法一览|上品鼠禁
优美的旋律至真的情怀《品茶轻音乐·极品典藏Vol
曾嵘《峥嵘岁月DSD（试音碟）》WAV+CUE
小提琴天碟AlfredoCampoli坎波利-贝多芬D大调小
博主称本周游戏业内动荡无比:高价PS5 Pro、Xbox
首页
音乐
电影
资源