网站首页
高清电影
无损音乐
游戏攻略
电脑教程
破解资源
站长资源
软件下载
css 实现文字垂直居中
(编辑：jimmy 日期: 2024/11/1 浏览：
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 字体隐藏
最新资源
王识贤.2005-男人泪【华特】【WAV+CUE】
群星.2006-美丽心民谣【野火乐集】【WAV+CUE】
陈明真.1990-变心的翅膀【华星】【WAV+CUE】
群星《庆余年第二季 影视原声带》[320K/MP3][29
群星《庆余年第二季 影视原声带》[FLAC/分轨][1
群星《狐妖小红娘月红篇 电视剧原声带》[320K/M
英雄联盟s14四强淘汰赛规则是什么 全球总决赛四
英雄联盟s14四强赛怎么分组 S14全球总决赛四强赛
英雄联盟s14四强赛抽签规则是什么 S14全球总决赛
ButterQuartet-ScintillaEarlyItalianStringQua
首页
音乐
电影
资源