垂直居中小记 line-height table vertical-align：middle
垂直居中分两种情况：1.父元素高度确定的单行文本 2.以及父元素高度确定的多行文本。
1.垂直居中-父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height高度一致来实现的，即此时单行文本的行高line-height=height(父元素块高度)。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
但是有一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块：
#sy{
margin-top:20px;
text-align:center;
height:50px;
line-height:50px;
width:200px;
font-size:20px;
background:#F30;}
<div id="sy">你看我是不是超出了父块元素？</div>
所以这种方法用于网页的页眉或者页脚还是很不错的
2.垂直居中-父元素高度确定的多行文本
方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。
（td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。）
.jz{
height:200px;
background:yellow;
}
<table><tbody><tr><td class="jz">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
方法2：通过设置父元素块为：display:table; 子元素为：display:table-cell;vertacal:middle;来让多行文本达到垂直居中效果（类似方法1）
table：此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
table-cell ： 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
例子1：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多行水平垂直居中</title>
<style type="text/css">
.no1{
display: table;
height: 300px;
border: 2px solid blue;
text-align: center;
}
.no2{ display: table-cell;
vertical-align: middle; } </style> </head>
<body>
<div class="no1">
<div class="no2">
<p>搞事情搞事情搞事情</p>
<p>要打架是不是？</p>
<p>一百块都不给我！</p>
</div> </div>
</body>
</html>
例子2：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多行垂直水平居中2</title>
<style type="text/css">
#no1{
display: table;
height: 300px;
border: 2px solid black;
text-align: center;
}
#no1 p{
font-size: 20px;
display: table-cell;
vertical-align: middle; }
</style>
</head>
<body>
<div id="no1">
<p>
搞事情搞事情搞事情<br>打架是不是？<br>一百块都不给我！
</p>
</div> </body>
</html>
两个例子有不同，剩下的思考思考，动动脑子，总不会有坏处,思考留评论让我看看你们的想法哇
垂直居中小记 line-height table vertical-align：middle的更多相关文章
- What is Vertical Align?
https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...
- 浏览器兼容CSS代码：按钮文字垂直居中(input button text vertical align)
经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...
- 关于Vertical Align的理解
1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...
- 前端知识点回顾之重点篇——CSS中vertical align属性
来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...
- 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
- 深入了解css的行高Line Height属性
什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...
- div仿checkbox表单样式美化及功能
div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部: 效果图: window.css .bj { position: absolute; top: 0; left: ...
- css 居中，中央
在我的技巧里,有4中居中中央的方法: 1.position:absolute; top:50%;left:50%; margin : -x 0 0 -x; 这是绝对定位的方法,通过算法移动,坏处就是必 ...
- 微信小程序中如何实现分页下拉加载？（附源码）
转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...
随机推荐
- jQuery全选、全不选、反选的简洁写法【实例】
全选方面的功能几乎是每个需要列表展示的网站所必不可少的,当然此功能也有很多种写法,现在介绍一下,比较简洁易懂的写法: <input type="checkbox" name= ...
- 以太网帧、TCP与UDP段以及IP数据报格式总结
传输层及其以下的机制由内核提供,是操作系统的一部分,应⽤层由⽤户进程提供应⽤层数据通过协议栈发到⽹络上时,每层协议都要加上⼀个数据⾸部(header),称为封装.不同的协议层对数据包有不同的称谓,在传 ...
- 窗体调用 OCX 的使用方法（MFC,WINFORM）
在上一篇中,我们做了一个OCX控件,叫mfcActive.ocx,在这一篇我们要做的就是使用这个ocx控件.第一步:创建一个MFC的对话框工程(其实winform 也是一样的) 第二步:在工具箱中常规 ...
- 社群系统 ThinkSNS+ 中如何利用 Laravel 表单验证来验证用户名的？（我朝独有需求，两个字母占一个汉字。。。）
ThinkSNS+后端框架使用laravel,每周和 laravel master 保持同步,而后台和 html 5 则采用 vue 开发.语言特性方面,采用 php 7 的严格模式. 言归正传,之所 ...
- 似是而非的JS - 异步调用可以转化为同步调用吗？
源起 小飞是一名刚入行前端不久的新人,因为进到了某个大公司,俨然成为了学弟学妹眼中'大神',大家遇到js问题都喜欢问他,这不,此时他的qq弹出了这样一条消息 "hi,大神在吗?我有个问题想问 ...
- C/C++ 知识点---存储区
C/C++ 知识点---存储区 在C++中,内存分成5个区,他们分别是堆.栈.自由存储区.全局/静态存储区和常量存储区. 栈,就是那些由编译器在需要的时候分配,在不需要的时候自动清楚的变量的存储 ...
- SQL查询操作及子句优先级
用source .sql文件竟然可以自动建表. 简单数据查询: select * from table_name; 避免重复查询: select distinct(field_name) from t ...
- Matlab学习笔记（2）
1. 在MATLAB中默认最开始出现的是命令窗口,也就是Command Window.对应的文件保存后扩展名一般都 是.mat 真正的程序代码编辑窗口应该新建New Script或者其他的.此时保存的 ...
- Struts2学习笔记(五)——Action访问Servlet API
在Strut2中访问Servlet API有三种方式: 1.通过ActionContext访问Servlet API,推荐使用这种,但是这种方案它获取的不是真正的事Servlet API. 步骤: 1 ...
- VMware Workstation 12 Player之安装林耐斯-Linux Deepin -系统
VMware Workstation 12 Player之安装林耐斯-Linux Deepin -系统... ============= ============= ============= === ...