网站首页
高清电影
无损音乐
游戏攻略
电脑教程
破解资源
站长资源
软件下载
css 实现文字垂直居中
(编辑：jimmy 日期: 2024/12/29 浏览：
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 字体隐藏
一句话新闻
Windows上运行安卓你用过了吗
在去年的5月23日，借助Intel Bridge Technology以及Intel Celadon两项技术的驱动，Intel为PC用户带来了Android On Windows（AOW）平台，并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版，将Windows与安卓两大生态进行了融合，PC的使用体验随即被带入到了一个全新的阶段。
最新资源
群星《奔赴！万人现场 第2期》[FLAC/分轨][518.8
群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[32
群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[FL
【古典音乐】詹姆斯·高威《季节》1993[WAV+CUE]
贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]
小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
群星《欢迎来到我身边 电影原声专辑》[320K/MP3
群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨
雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓
群星《2024好听新歌42》AI调整音效【WAV分轨】
首页
音乐
电影
资源