valign 属性在 HTML5 中已被废弃，仅适用于表格单元格且兼容性差；应改用 flex 布局，通过父容器设置 display: flex 和 align-items: center 实现垂直居中，注意需明确父容器高度。
valign 属性为什么不能用了
valign 是 <td> 和 <th> 的 HTML 属性，属于过时的呈现控制方式。HTML5 明确将其标记为废弃（obsolete），浏览器虽大多仍兼容，但会触发验证警告，且在严格模式或未来版本中可能彻底失效。它只作用于表格单元格内部内容，无法用于 <div>、<span> 等通用容器，灵活性极差。
用 flex 实现单行内容垂直居中（最常用场景）
对齐目标通常是父容器内一个子元素（比如文字、图标、按钮），高度已知或由内容撑开。关键不是“让子元素自己居中”，而是让父容器成为 flex 容器，并控制其交叉轴对齐方式：
- 给父元素设置
display: flex - 加上
align-items: center—— 这是控制**交叉轴（默认为 Y 轴）上所有子项**垂直居中的核心声明 - 如果父容器高度未定义（比如仅靠内容撑开），需额外设
min-height或height，否则视觉上看不到“居中”效果
<div style="display: flex; align-items: center; height: 200px; border: 1px solid #ccc;"> <span>我要垂直居中</span> </div>
flex 垂直居中在表格单元格里怎么写
很多人想直接替换 <td valign="middle">，但注意：<td> 默认是 table-cell，不能直接加 display: flex——这会破坏表格布局语义和渲染行为。正确做法是：在 <td> 内部嵌一层 <div>，再对这个 div 应用 flex：
- 保留原
<table>结构，不改动语义 - 在
<td>中包裹一层<div class="flex-center"> - 该 div 设置
display: flex+align-items: center+height: 100%（确保占满单元格） - 若单元格有 padding，flex 容器默认不继承，需显式设置
box-sizing: border-box
<td>
<div style="display: flex; align-items: center; height: 100%; box-sizing: border-box;">
<img src="icon.png" alt="icon">
</div>
</td>align-items 和 justify-content 别混用
新手常把 justify-content: center 当成“垂直居中”，这是错的。它的作用轴取决于 flex-direction：
立即学习“前端免费学习笔记（深入）”；
- 默认
flex-direction: row→justify-content控制**水平（主轴）** 对齐，align-items控制**垂直（交叉轴）** 对齐 - 若改成
flex-direction: column，两者作用轴互换，此时justify-content: center才管垂直方向 - 除非你明确需要列布局，否则不要改
flex-direction，老实用align-items: center - 另外，
align-self可单独覆盖某个子项的交叉轴对齐，但多数情况不需要
真正容易被忽略的是：flex 垂直居中依赖父容器有明确高度约束。没有 height、min-height 或 max-height，即使写了 align-items: center，也可能看起来毫无反应——因为容器高度就是内容高度，不存在“可居中的空间”。
