flex容器必须撑满可用高度才能垂直居中，因默认高度由内容决定，需设min-height: 100vh或确保父级有高度；justify-content和align-items作用于整个容器；换行需显式设flex-wrap: wrap；grid的place-items: center更简洁但兼容性较低。
flex容器必须撑满可用高度才能垂直居中
很多开发者写完 display: flex、justify-content: center 和 align-items: center，发现子元素只水平居中、不垂直居中——根本原因是父容器没占满高度。浏览器默认情况下，div 高度由内容撑开，如果内容很短，容器就“塌陷”，align-items: center 失效。
解决方法很简单：给父容器加 min-height: 100vh 或明确设高（如 height: 100%，前提是祖先也设高）。移动端注意加 viewport meta，否则 vh 可能不准。
- 用
min-height: 100vh最直接，兼容性好（IE11+） - 若嵌套在其他布局里（比如 sidebar + main），优先用
height: 100%并确保所有父级都有高度声明 - 避免只写
height: 100vh—— 页面内容超长时会截断，min-height更安全
多个子元素同时居中时，justify-content 和 align-items 的作用范围
justify-content 控制主轴（默认水平）上所有子项的对齐方式，align-items 控制交叉轴（默认垂直）上所有子项的对齐方式。它们作用于整个 flex 容器，不是单个子元素。
常见误区是以为每个子元素都要单独加居中样式，其实只要容器设对，所有直接子元素自动按规则排列。
- 主轴方向由
flex-direction决定：row（默认）→justify-content水平生效；column→justify-content垂直生效 - 想让多个按钮在容器里水平居中且等间距，用
justify-content: space-around或space-evenly，不是靠 margin 手动调 - 子元素自身设
margin: auto会覆盖align-items，慎用
响应式下多元素居中容易被忽略的换行问题
当子元素宽度总和超过容器，或屏幕变窄时，flex-wrap: wrap 决定是否换行。默认 flex-wrap: nowrap，元素会被强行压缩或溢出，看着像“没居中”。
比如三个卡片并排，在手机上挤成一条细线，实际仍是居中，但视觉上完全不对劲。
- 加
flex-wrap: wrap让子项自动折行，再配合justify-content: center，每行都居中 - 用
flex-basis或flex: 0 1 calc(33.333% - 12px)控制单个子项最大宽度，避免小屏下单个元素过宽 - 别依赖
white-space: nowrap强制不换行，它会破坏居中逻辑
Grid 替代方案：place-items: center 更简洁但兼容性略低
如果目标环境支持（Chrome 57+/Firefox 52+/Safari 10.1+），display: grid + place-items: center 是一行代码实现多元素水平垂直居中的最简写法，且天然支持二维布局。
但它不处理子元素间的顺序或间距逻辑，纯居中场景下比 Flex 更干净；需要控制排列顺序或分布时，Flex 仍是首选。
-
place-items: center等价于justify-items: center; align-items: center - Grid 不受父容器高度塌陷影响，
min-height: 100vh仍建议保留，但容错性比 Flex 高 - 旧项目或需兼容 IE 的场景，坚持用 Flex，别为了简洁强行上 Grid
真正卡住人的往往不是语法，而是容器高度没撑开、主轴方向没确认、或者换行被默认禁用了。这些点不检查，写十遍 align-items: center 也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
