>[danger] line-height详解 ---- line-height: 行高 = 上间距+文本高度(字体大小)+下间距  行距: 2行文本之间的距离 (一般等于行高减去字体高度 / 2) >[info] 取值范围 --- | 类型 | 例如 | 解释 | | --- | --- | --- | | normal | normal | 等同于数字的 1.2 | |数字| 1 | 当前标签font-size计算 | |单位| 1em | 当前标签font-size计算 | |单位| 1rem | html的font-size计算| |单位| 16px | 间距为8px | |单位| 100% | 等同于1 和 1em | 注意: 建议使用数字, 避免受父级影响, 确保等比例伸缩, 不允许使用负值 >[danger] 单行文本居中 * 已知高度 ~~~ height: 100px; line-height: 100px; ~~~ >[danger]多行文本居中 * 已知高度 ~~~ .father{ line-height: 200px; } .child{ display: inline-block; line-height: 1; vertical-align: middle; // 行内元素垂直对齐方式 } ~~~ ~~~ <div class="father"> <div class="child"> 我是一排字我是一排字我是一排字 </div> </div> ~~~  >[danger] 单列文本垂直居中 --- 借用了弹性布局 ~~~ .father{ line-height: 300px; text-align: center; border: 1px solid black; } .child{ display: inline-block; line-height: 1; width: 1em; vertical-align: middle; } ~~~ ~~~ <div class="father"> <div class="child"> 我是一排字我是一排字我是一排字 </div> </div> ~~~