[html+css]HTML+CSS基础课程：垂直居中

摘抄于慕课网《HTML+CSS基础课程》

    分为两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。

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

父元素高度确定的单行文本的竖直居中的方法是 通过设置父元素的 height 和 line-height 高度一致来实现的。

height: 该元素的高度；

line-height: 行高（行间距），指在文本中，行与行之间的 基线间的距离；

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

弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

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

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

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

td 标签默认情况下就默认设置了 vertical-align 为 middle

方法二：在 chrome、firefox 及 IE8 以上的浏览器下可以 设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性