AutoCAD
3DMAX
C语言
Pro/E
UG
JAVA编程
PHP编程
Maya动画
Matlab应用
Android
Photoshop
Word
Excel
flash
VB编程
VC编程
Coreldraw
SolidWorks
A Designer
Unity3D
AE教程
Delphi
C++
汇编语言
数据结构
软件工程
ASP编程
JSP
JavaScript
XML
SQL Server
ACCESS
MySQL
速读教程
IQ智商
记忆力
口才教程
学习方法
软件工程
ASP编程
JSP
JavaScript
XML
html游戏
ACCESS
MySQL
首页
>
css教程
css 实现文字垂直居中
51自学网
http://www.wanshiok.com
文字,垂直居中分两种情况：
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
CSS的三列式"圣杯布局"方案完全解析
CSS Web安全字体组合详解
css水平居中的各种方法总结(推荐)
CSS使用BFC规则布局引发外层div包裹内层div的处理方法
CSS在固定宽高的div内实现垂直居中的实例详解
浅谈CSS中的clear清除浮动
浅析css3中matrix函数的使用
使用CSS3中的calc()属性来以算式表达尺寸数值
上一篇：
让CSS代码更具有易维护性
下一篇：
css overflow与text-indent:-999em 字体隐藏
分享到：
QQ空间
新浪微博
腾讯微博
人人网
网易微博
CAD教程
教师招聘
招聘信息
51自学网 我要自学网视频教程,视频下载 自学网 自学编程网 CAD自学网 PS自学网 www.wanshiok.com
网站地图
