>[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> ~~~