text-align: center仅控制水平居中，垂直对齐需用vertical-align；单行用line-height+vertical-align: middle，多行需flex或table-cell。
text-align: center 只管水平，不管垂直
给父容器加 text-align: center 确实能让 <span></span>、<a></a>、<img>（默认 inline）等行内元素水平居中，但它们在垂直方向上仍按 baseline 对齐——这是行内盒的默认行为，不是 bug，而是 CSS 规范。常见现象是文字和图标看起来“偏下”，尤其和 <input> 或 <button></button> 并排时错位明显。
vertical-align 是关键，不是 line-height
vertical-align 才是控制行内元素垂直对齐的属性，但它只对行内级元素（inline / inline-block）生效，且作用对象是“当前行框内的基线关系”，不是相对于父容器上下边缘居中。
- 常用值：
vertical-align: middle把元素中点对齐到父元素 x-height 中点（不是容器中心），适合搭配line-height使用 - 如果父容器有明确
line-height，且子元素是纯文本或display: inline-block图标，设vertical-align: middle通常就能视觉对齐 -
vertical-align: top或bottom有时比middle更可控，尤其当元素高度不一致时 - 别在块级父容器上设
vertical-align——它对块级元素无效
单行文本+图标混合居中：line-height + vertical-align 组合拳
当一行里既有文字又有 <img> 或 <svg></svg>，最稳方案是统一行高并调对齐基准：
div {
line-height: 40px; /* 和容器高度一致 */
text-align: center;
}
div img,
div span {
vertical-align: middle;
}
注意：line-height 设在父容器上，不是子元素；vertical-align: middle 加在每个行内子元素上。若 <img> 没设 vertical-align，它会按 baseline 落在文字底部，导致整体下沉。
多行文本垂直居中不能靠 vertical-align
vertical-align 对多行段落无效——它只作用于单行内的行内盒。想让多行文字在容器中垂直居中，必须换思路：
- 父容器设
display: flex; align-items: center;，子元素保持默认 display（哪怕它是<p></p>） - 或用
display: table-cell; vertical-align: middle;（兼容 IE8+，但语义退化） - 绝对定位 +
transform: translateY(-50%)也行，但需父容器position: relative且高度已知 - 别试图用
padding-top == padding-bottom应对响应式场景——高度不确定时容易溢出或留白过多
真正容易被忽略的是：行内元素的垂直对齐永远依赖所在行框（line box）的上下文，脱离这个上下文谈“居中”没有意义。先确认你是在单行环境还是多行环境，再选对应解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
