按钮和文字对不齐的根源是dom结构断裂，二者不在同一逻辑容器内；需将按钮与对应文字封装进同一.flex容器并设flex-direction:column、align-items:center，统一使用rem或px单位。
为什么按钮和文字总对不齐？根源在 DOM 结构断裂
按钮和下方文字对不齐，不是 align-items 没设对，而是它们根本不在同一个逻辑容器里。原始写法中，按钮放在 .btn-container 里，而 <h5></h5> 文字却丢在外部独立的 .texts 区域——DOM 层级断开，CSS 就没法建立“这个按钮对应这段文字”的绑定关系。Flexbox 只能控制直接子元素，跨容器对齐纯靠碰运气。
常见现象包括：小屏下文字换行错位、按钮宽度变化时文字偏移、加了 margin-top 后不同按钮文字高度不一致。
- 重构 HTML，把每个按钮和它正下方的
<h5></h5>封装进同一个<div class="btn-unit"> <li>避免用通用类名（如 <code>.item）混用在按钮和文字上，容易被全局样式误伤 - 语义优先：可用
<section role="group"></section>替代裸<div>，提升可访问性 <h3>flex-direction: row 时 align-items 控制的是垂直对齐</h3> <p>很多人设了 <code>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></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。 - 给
