垂直居中分两种情况:1.父元素高度确定的单行文本        2.以及父元素高度确定的多行文本。

  1.垂直居中-父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height高度一致来实现的,即此时单行文本的行高line-height=height(父元素块高度)。(height: 该元素的高度,line-height: 顾名思义,行高(行间距),指在文本中,行与行之间的 基线间的距离 )。

line-height 与 font-size 的计算值之差,在 CSS 中成为“行间距”。分为两半,分别加到一个文本行内容的顶部和底部。

但是有一个弊端:当文字内容的长度大于块的宽时,就有内容脱离了块:

  1. #sy{
  2. margin-top:20px;
  3. text-align:center;
  4. height:50px;
  5. line-height:50px;
  6. width:200px;
  7. font-size:20px;
  8. background:#F30;}
  9.  
  10. <div id="sy">你看我是不是超出了父块元素?</div>

所以这种方法用于网页的页眉或者页脚还是很不错的

  2.垂直居中-父元素高度确定的多行文本

    方法一:使用插入 table  (包括tbody、tr、td)标签,同时设置 vertical-align:middle。

        css 中有一个用于竖直居中的属性 vertical-align,在父元素设置此样式时,会对inline-block类型的子元素都有用。

        (td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。)

  1. .jz{
  2. height:200px;
        background:yellow;
  3. }
  4.  
  5. <table><tbody><tr><td class="jz">
  6. <div>
  7. <p>看我是否可以居中。</p>
  8. <p>看我是否可以居中。</p>
  9. <p>看我是否可以居中。</p>
  10. <p>看我是否可以居中。</p>
  11. <p>看我是否可以居中。</p>
  12. </div>
  13. </td></tr></tbody></table>

    方法2:通过设置父元素块为:display:table; 子元素为:display:table-cell;vertacal:middle;来让多行文本达到垂直居中效果(类似方法1)

        table:此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。

        table-cell : 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)

例子1:

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>多行水平垂直居中</title>
  6. <style type="text/css">
  7. .no1{
  8. display: table;
  9. height: 300px;
  10. border: 2px solid blue;
  11. text-align: center;
  12. }
  13. .no2{
  14.  
  15. display: table-cell;
  16. vertical-align: middle;
  17.  
  18. }
  19.  
  20. </style>
  21.  
  22. </head>
  23. <body>
  24. <div class="no1">
  25. <div class="no2">
  26. <p>搞事情搞事情搞事情</p>
  27. <p>要打架是不是?</p>
  28. <p>一百块都不给我!</p>
  29. </div>
  30.  
  31. </div>
  32. </body>
  33. </html>

例子2:

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>多行垂直水平居中2</title>
  6. <style type="text/css">
  7. #no1{
  8. display: table;
  9. height: 300px;
  10. border: 2px solid black;
  11. text-align: center;
  12. }
  13. #no1 p{
  14. font-size: 20px;
  15. display: table-cell;
  16. vertical-align: middle;
  17.  
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div id="no1">
  23. <p>
  24. 搞事情搞事情搞事情<br>打架是不是?<br>一百块都不给我!
  25. </p>
  26. </div>
  27.  
  28. </body>
  29. </html>

  两个例子有不同,剩下的思考思考,动动脑子,总不会有坏处,思考留评论让我看看你们的想法哇

 

垂直居中小记 line-height table vertical-align:middle的更多相关文章

  1. What is Vertical Align?

    https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...

  2. 浏览器兼容CSS代码:按钮文字垂直居中(input button text vertical align)

    经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...

  3. 关于Vertical Align的理解

    1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...

  4. 前端知识点回顾之重点篇——CSS中vertical align属性

    来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...

  5. How to Take Control of Your Line Height in Outlook.com

    Reference to: http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com

  6. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  7. div仿checkbox表单样式美化及功能

    div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部: 效果图: window.css .bj { position: absolute; top: 0; left: ...

  8. css 居中,中央

    在我的技巧里,有4中居中中央的方法: 1.position:absolute; top:50%;left:50%; margin : -x 0 0 -x; 这是绝对定位的方法,通过算法移动,坏处就是必 ...

  9. 微信小程序中如何实现分页下拉加载?(附源码)

    转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...

随机推荐

  1. docker安装方法(常见安装出错问题汇总)

    参考资料: 1. 开源中国  http://www.oschina.net/translate/nstalling-dockerio-on-centos-64-64-bit?cmp Docker 是一 ...

  2. 再起航,我的学习笔记之JavaScript设计模式05(简单工程模式)

    我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前几 ...

  3. theOS环境搭建

    http://joeyio.com/ios/2014/01/01/make-a-mobile-substrate-tweak-using-theos/~/Doucment>: cd mytwea ...

  4. 贪心:字典树openjudge1799-最短前缀

    描述 一个字符串的前缀是从该字符串的第一个字符起始的一个子串.例如 "carbon"的字串是: "c", "ca", "car&q ...

  5. Docker 搭建开发环境

    本文介绍如何将Docker集成到开发环境,自动构建应用,并使容器拥有独立的内网IP为开发人员提供服务. 术语解释 Docker镜像:一个不可修改的"模板",每个代码版本对应一个镜像 ...

  6. 关于MySQL buffer pool的预读机制

    预读机制 两种预读算法 1.线性预读 2.随机预读 对预读的监控 一.预读机制 InnoDB在I/O的优化上有个比较重要的特性为预读,预读请求是一个i/o请求,它会异步地在缓冲池中预先回迁多个页面,预 ...

  7. LINUX系统自动化部署shell脚本

    #!/bin/shsudo /etc/init.d/tomcatstopwaitsudo rm -rf /opt/tomcat7/work/*waitsudo rm -rf /opt/tomcat7/ ...

  8. Eclipse快捷键:同时显示两个一模一样的代码窗口

    如图: 同样的一个HTML文件,在代码编辑窗口,显示两个.   快捷键: Ctrl + Shift + -(减号)   既可以展示两个,也可以只显示一个 附加一个快捷键: Ctrl + Shift + ...

  9. CentOS 7 服务器配置--配置Tomcat开机启动

    #编辑Tomcat的文件,追加内容 vi /data/tomcat/apache-tomcat-8.0.43/bin/catalina.sh #追加内容,在CLASSPATH= 上面的第三行 CATA ...

  10. 迭代器(Iterator)

    迭代器是一种设计模式,它是一个对象,它可以遍历并选择序列中的对象,而开发人员不需要了解该序列的底层结构.迭代器通常被称为"轻量级"对象,因为创建它的代价小. Java中的Itera ...