leading属性不能实现文本垂直居中，因其仅设置行高（line-height），而垂直居中需容器有可分配空白空间及明确对齐方式；h-12（3rem）与leading-6（1.5rem）数值不匹配导致留白不均，且leading最大仅到leading-10（2.5rem），无leading-12；可靠方案是使用flex + items-center，父容器需设flex和明确高度，子元素自动垂直居中。
leading 属性本身不能实现文本垂直居中，它只设置行高（line-height），而垂直居中需要容器内有可分配的空白空间并明确对齐方式。强行用 leading-* 配合固定高度（如 h-12）往往失效，因为行高 ≠ 垂直偏移量。
为什么 leading-6 + h-12 不垂直居中？
根本原因是数值不匹配：h-12 编译为 height: 3rem，而 leading-6 是 line-height: 1.5rem。文本块实际占据高度约等于行高，剩余空间上下均分才可能视觉居中——但这里行高只占容器高度一半，顶部和底部留白不等，且 text-center 只管水平对齐，对垂直无影响。
-
leading-*最大只到leading-10（即2.5rem），不存在leading-12 - 即使设
leading-10，若容器是h-12（3rem），仍有0.5rem空白未被分配，无法保证居中 -
text-center和leading-*组合对块级元素内的单行文本无效，因为没有 flex 或 table-cell 上下文来触发行高居中逻辑
用 flex + items-center 实现可靠垂直居中
这是最直接、语义清晰、兼容性最好的方式，不依赖行高与高度的数值巧合。
- 父容器必须同时有
flex（启用 flex 布局）和明确高度（如h-12、min-h-screen） -
items-center在默认flex-row下作用于交叉轴（即垂直方向），真正控制垂直对齐 - 如果还需水平居中，加
justify-center；只需垂直居中则用justify-start或不加（避免误判） - 子元素无需额外
h-*或leading-*，文本会自动在可用空间内居中
示例：
<div class="flex h-12 w-24 items-center justify-center hover:bg-black hover:text-white">首页</div>
立即学习“前端免费学习笔记（深入）”；
什么时候可以考虑调整 leading + 高度配合？
仅当满足以下全部条件时，这种“老式”方式才勉强可行：
- 容器高度固定且已知（如
h-10→2.5rem） - 使用最大可用
leading-10（2.5rem），使行高等于容器高度 - 文本为单行、无换行、无
padding干扰，且字体大小适中（否则文字会被截断或溢出） - 不要指望它在响应式场景下稳定——
leading-10在小屏上可能让文字撑出容器
示例（慎用）：
<div class="h-10 w-24 text-center leading-10 hover:bg-black hover:text-white">首页</div>
真正容易被忽略的是：哪怕只加 items-center，也必须确保父容器是 flex 容器且有可测量高度。常见失败不是类写错了，而是忘了给父级加 flex，或者父容器高度是 auto 导致交叉轴无空间可居中。
