按钮和文字对不齐的根源是DOM结构断裂，二者不在同一逻辑容器内；需将按钮与对应文字封装进同一.flex容器并设flex-direction:column、align-items:center，统一使用rem或px单位。
为什么按钮和文字总对不齐？根源在 DOM 结构断裂
按钮和下方文字对不齐，不是 align-items 没设对，而是它们根本不在同一个逻辑容器里。原始写法中，按钮放在 .btn-container 里，而 <h5> 文字却丢在外部独立的 .texts 区域——DOM 层级断开，CSS 就没法建立“这个按钮对应这段文字”的绑定关系。Flexbox 只能控制直接子元素，跨容器对齐纯靠碰运气。
常见现象包括：小屏下文字换行错位、按钮宽度变化时文字偏移、加了 margin-top 后不同按钮文字高度不一致。
- 重构 HTML，把每个按钮和它正下方的
<h5>封装进同一个<div class="btn-unit"> - 避免用通用类名（如
.item）混用在按钮和文字上，容易被全局样式误伤 - 语义优先：可用
<section role="group">替代裸<div>，提升可访问性
flex-direction: row 时 align-items 控制的是垂直对齐
很多人设了 align-items: center 却发现按钮没上下居中，问题常出在父容器没高度或子元素自带干扰。主轴是水平方向时，交叉轴就是垂直方向，align-items 管的就是上下对齐。
关键检查点：
立即学习“前端免费学习笔记（深入）”；
- 给
.btn-container显式设置min-height（比如min-height: 60px），不能只靠内容撑开 - 确认按钮和文字都未设
margin、line-height或vertical-align—— 这些会覆盖align-items效果 - 用开发者工具选中容器，看 computed 样式里 cross size（即高度）是否为 0；如果是，说明容器没高度
嵌套 Flex 容器里 align-self 不作用于孙子元素
align-self 只对 Flex 容器的**直接子元素**生效。如果你在 .btn-unit 里又套了一层 display: flex，那里面的按钮再设 align-self: center 是无效的——它只影响 .btn-unit 这一级的子元素，不穿透到内部嵌套结构。
典型错误写法：
<div class="btn-unit"> <button>确定</button> <div class="text-wrapper"><h5>确认操作</h5></div> </div>
如果 .text-wrapper 是 flex 容器，想让它里面文字垂直居中，得在 .text-wrapper 上设 align-items: center，而不是给 <h5> 加 align-self。
-
align-self仅用于覆盖父容器的align-items，且只对直系子项有效 - 嵌套布局中，每一层 flex 容器都要单独配对设置
justify-content和align-items - IE10–11 不支持
align-self，需用-ms-flex-item-align: center
响应式下对齐失效？别依赖 text-align 或 margin-top
用 text-align: center 或 margin-top 强行把文字往下拉，在桌面端看似对齐，一到移动端就露馅：按钮变宽、文字换行、视口缩小时 margin 值失准。真正稳定的方案是让每组「按钮 + 文字」自成一个弹性单元，并用 flex-direction: column 控制内部堆叠。
- 在
.btn-unit上设display: flex; flex-direction: column; align-items: center; - 按钮设固定
width或flex: 0 0 auto，防止被拉伸影响文字位置 - 文字用
margin-top: 8px（而非百分比或 em），配合flex-shrink: 0防止压缩
最易被忽略的一点：所有单位必须统一。按钮用 rem，文字用 em，容器用 %，三者在缩放时步调不一致，对齐就会漂移。建议全链路用 rem 或全用 px。
