CSS 行高 line-height 與 height 相等時的垂直居中原理

CSS 布局中常見技巧：單行文本垂直居中，設置 line-height == height。為什麼這能生效？什麼場景適用？

核心原理

• height：決定盒模型內容區高度，即容器外觀高度。
• line-height：決定行盒基線間距，瀏覽器按行盒高度在容器內垂直置中文本。
• 當兩者相等時，行盒高度 = 容器高度，文本自然處於容器正中。

適用場景與限制

現代替代方案（推薦）

.center { display: flex; align-items: center; justify-content: center; }
/* 或 */
.center { display: grid; place-items: center; }

Flex/Grid 支持多行、多元素、自適應高度，是當前主流垂直居中方案。

一行代碼記住

單行用 line-height=height，多行用 flex/grid。