15-6垂直居中-父元素高度确定的单行文本 · 初识HTML+CSS

我们在实际工作中也会遇到需要设置垂直居中的场景，比如好多报纸的文章标题在左右一侧时，常常会设置为垂直居中，为了用户体验性好。这里我们又得分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。本节我们先来看第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢？ **父元素高度确定的单行文本**的竖直居中的方法是通过设置父元素的 height 和[ line-height ](http://www.imooc.com/code/2083 "忘了的小伙伴，让我们点击链接复习一下吧!")高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的基线间的距离 )。 line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。如下代码： ~~~ <div class="container"> hi,imooc! </div> ~~~ css代码： ~~~ <style> .container{ height:100px; line-height:100px; background:#999; } </style> ~~~ ### 任务我来试试：补充右侧代码使 h2 中的文本垂直方向居中。（记得点击右上角的全屏按钮查看效果哦！） ``` <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>垂直居中</title> <style> .wrap h2{ margin:0; height:100px; line-height:100px; background:#ccc; } </style> </head> <body>  <div class="wrap"> <h2>hi,imooc!</h2> </div> </body> </html> ```