分为两种情况:父元素高度确定的单行文本,以及父元素高度确定的多行文本。
垂直居中--父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 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 属性