css 实现文字垂直居中

2024-07-11 08:38:56

字体：大中小

来源：转载

供稿：网友

分两种情况：
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> 
提示：您可以先修改部分代码再运行

上一篇：多个浏览器透明度设置

下一篇：IE和FF在对js支持的不同(整理)及解决方法

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注