首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网页制作
CSS
正文
css 实现文字垂直居中
所属分类：
网页制作
/
CSS
阅读数： 833
收藏 0
赞 0
分享
分两种情况：
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>
提示：您可以先修改部分代码再运行
更多精彩内容
其他人还在看
2013年五大主流浏览器 HTML5 与 CSS3 兼容性大比拼
这篇文章主要介绍了2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
前端设计师需要了解的9个问题
这篇文章主要介绍了前端设计师需要了解的9个问题以及注意事项，非常的实用，是篇非常不错的文章，这里推荐给大家
评论 0
收藏 0
赞 0
分享
CSS强制性换行的方法区别详解
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
评论 0
收藏 0
赞 0
分享
CSS语义化命名方式及常用命名规则
本文搜集了一些CSS语义化命名方式以及命名规则。如有错误或不妥之处，敬请指出，欢迎你提出更好的建议，加插更多的命名规范。
评论 0
收藏 0
赞 0
分享
ul li内容宽度的问题的解决方案
在IE6下只要我设置LI的宽度为auto，不论LI里面的内容多长，LI的宽度始终是100%，即UL的宽度(这里我已经写死了UL的宽度)。设置max-width也没用。高手们，在IE系列浏览器中如何使LI的宽度真正的随着内容增长而增长呢？像FF那样。
评论 0
收藏 0
赞 0
分享
html5+css3气泡组件的实现
本文是html5+css3系列教程的第一篇，给大家讲述html5+css3实现气泡组件，讲解的十分的详细，这里推荐给大家，希望对大家能有所帮助
评论 0
收藏 0
赞 0
分享
html5+css3之CSS中的布局与Header的实现
本文从CSS3的布局（CSS的布局的演化、CSS3盒模型-box-sizing、float布局中的bfc、Flexbox简介）Header布局的实现（float实现布局、Header js的实现）向我们展示了HTML5与CSS3的魅力。
评论 0
收藏 0
赞 0
分享
一款恶搞头像特效的制作过程 利用css3和jquery
今天给大家介绍一款恶搞头像特效的制作过程，你可以把任意一张照片放到跳舞的漫画中，为他带上不同的帽子，让他翩翩起舞，下面我们一起来看一下制作过程和效果
评论 0
收藏 0
赞 0
分享
大图片根据分辨率自适应宽度仍居中显示
一个1920*900的大图，在1024*768的分辨率下仍居中显示，如何做到这一点，下面是一个可行的解决方案
评论 0
收藏 0
赞 0
分享
CSS3提交意见输入框样式代码
这个提交意见输入框，结构使用到了table，样式用的css3，包含了多方面的知识，比较适合新手朋友们
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
内容型网站实现盈利的6种方法
90后男屌丝如何让淘宝客日赚10万滴
SEO都有哪些赚钱的方式？ SEO的十种赚钱方式详解
网赚如何避免上当受骗?网赚骗子如何防?
SEO中到底是流量重要还是转化率重要
图文讲解信用卡验证激活国际版PayPal账号的教程
站长故事
更多
从地图到苹果6！盘点苹果产品的四大败笔
站长故事：一个80后妈妈的微商之旅
草根站长网站运营:运气创业,勤能过日子
如何让自己的网站流量暴增并增加成交率
做好网站维护 持续吸引用户浏览
暴走漫画运营经理 这就是高级运营与初级运营的区别
