align-items: center 是 flexbox 中实现垂直居中的最直接方法，需作用于 display: flex 的父容器，控制交叉轴（默认垂直方向）对齐，要求容器有明确高度，且子元素为直系子节点。
Flexbox 的 align-items 是最直接解法
固定宽高盒子中内容垂直居中，align-items: center 配合 display: flex 就够了，不需要额外计算或嵌套。它作用于 flex 容器的**交叉轴**（默认是垂直方向），天然适配已知高度的容器。
常见错误是只写 justify-content: center（只管水平），漏掉 align-items；或者把 flex 加在子元素上（无效，必须加在父容器）。
- 父容器需设
display: flex+align-items: center，子元素无需设高 - 若子元素是块级且有 margin，可能干扰对齐，建议统一用
margin: 0或重置 - 多行文本、图片、按钮等混合内容都适用，不依赖 line-height 或 display 类型
padding 手动居中只适合纯文本且高度可控
用 padding-top 和 padding-bottom “挤”出视觉居中效果，本质是靠数值估算，不是真正居中。它只在内容为单行、字体大小稳定、盒子高度严格固定时勉强可用。
例如盒子高 200px，文字行高 24px，想居中就得算：padding: 88px 0（(200 − 24) / 2）。一旦字体缩放、换行或 padding 被继承，立刻错位。
- 绝对不要用于响应式场景或用户可调节字号的界面
- 和
line-height混用会冲突，浏览器优先采用 line-height 对齐逻辑 - 如果盒子用了
box-sizing: border-box，padding 会压缩内容区，进一步影响预估精度
为什么不用 margin: auto 在普通块盒里垂直居中？
在非 flex/grid 的普通块级上下文中，margin: auto 只对水平方向生效（left/right），垂直方向（top/bottom）始终为 0 —— 这是 CSS 规范定义的行为，不是 bug。
有人误以为给子元素设 margin: auto 就能垂直居中，结果发现完全没反应。根本原因是：块级元素的垂直 margin 自动计算规则不触发，除非它处于「块级格式化上下文中的替换元素」或被显式设为 position: absolute 并满足四边定位条件。
- 只有当子元素是
position: absolute且top/bottom同时为0时，margin: auto才在垂直方向起效 - Flex 子项或 Grid 子项的
margin: auto行为不同，但那是布局模型决定的，不能套用到普通块流
Flexbox 居中后内容溢出被裁剪怎么办？
加了 align-items: center 后，如果子元素本身高度超过父容器，又没设 overflow，内容会被截断 —— 这不是居中失效，而是盒模型边界限制。
典型场景：一个 height: 200px 的 flex 容器里放了 height: 240px 的 div，即使居中，顶部和底部各 20px 也会被裁掉。
- 检查子元素是否意外设置了固定高度或 min-height
- 用
max-height: 100%+overflow: auto替代固定高，保留滚动能力 - 若必须撑开容器，就别用固定高，改用
min-height或 flex 的flex-grow
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
