默认flex-direction: row时，justify-content管左右（水平），align-items管上下（垂直）；要水平垂直居中需同时设justify-content: center和align-items: center，且容器需有高度，子元素不能脱离文档流。
flex布局里align-items和justify-content到底谁管上下谁管左右
垂直居中不是靠猜，而是看容器主轴方向。默认flex-direction: row时，主轴水平，justify-content管左右，align-items才管上下（也就是垂直方向）。
常见错误是只写align-items: center却忘了父容器必须设display: flex，或者误以为justify-content: center能垂直居中——它在默认行方向下只居中子项的水平位置。
- 要让子元素在容器内真正垂直+水平居中，两个属性得一起用：
justify-content: center+align-items: center - 如果容器高度没撑开（比如父级没设
height或内容塌陷），align-items会“失效”——看起来没居中，其实是没空间可居 - 用
min-height: 100vh比height: 100vh更稳妥，避免内容超长时被截断
为什么margin: auto在Flex容器里也能垂直居中
当子元素是Flex项目（即父容器为display: flex），且没有设置flex相关收缩/拉伸属性时，margin: auto会同时作用于上下左右外边距，在可用空间内把元素推到正中心。
这招比双align/justify更简洁，但有隐藏前提：子元素不能是flex项目中的“弹性项”（比如没设flex: 1或flex-grow），否则margin: auto会被忽略。
立即学习“前端免费学习笔记（深入）”；
- 适用场景：单个需要居中的块级子元素，比如登录框、弹窗容器
- 不适用场景：多个子项并排 + 要整体居中，这时还得靠
justify-content - 注意IE10–11对
margin: auto在Flex中垂直方向的支持不完整，真要兼容得换方案
用place-items: center是不是更省事
是，但得看浏览器支持。place-items: center是align-items和justify-items的简写，对Flex布局来说，它等价于align-items: center; justify-content: center（注意：这里justify-items在Flex中实际由justify-content接管）。
问题在于，这个简写在Flex容器上属于“隐式行为”，部分老版本Chromium或safari可能解析不一致；而且一旦你后续要单独调整某一个方向，又得拆回两个属性，反而增加维护成本。
- 现代项目（chrome 84+/firefox 73+/Safari 14.1+）可以放心用
place-items: center - 如果项目还要支持ios 13或android webview旧版，建议直接写全两个属性
-
place-items对Grid布局才是“原生主场”，Flex里它只是语法糖，别被名字带偏
居中后内容溢出或文字折行异常怎么办
Flex居中本身不处理内部排版，但容易暴露子元素自身的尺寸失控问题。最典型的是：容器设了align-items: center，但子元素含长单词或未设max-width，导致横向撑破容器，进而影响垂直计算逻辑。
这不是Flex错了，是子元素没做防溢出约束。尤其在响应式场景下，文字折行、图片缩放、表单控件宽度都可能破坏居中效果。
- 给居中子元素加
max-width: 100%和word-break: break-word（或overflow-wrap: break-word） - 图片记得加
max-width: 100%; height: auto，否则可能拉高容器、挤压居中空间 - 如果子元素用了
position: absolute，它会脱离Flex流，align-items完全不起作用——这时候得靠top: 50%; transform: translateY(-50%)另起炉灶
Flex垂直居中最容易被忽略的，其实是容器高度是否真实存在、子元素是否意外脱离文档流、以及文本类内容有没有做基础溢出防护——这些地方一松动，居中就变成“看起来居中”。