flex容器垂直居中与滚动可共存，关键在于将overflow-y:auto设在容器上并锁定高度（如height:100vh+box-sizing:border-box），避免仅设子元素overflow或依赖margin:auto；多子元素时用align-self:center精准控制，Grid的place-items:center更简洁但兼容性较差。
flex容器设了align-items: center但内容溢出不滚动
根本问题不是居中失效，而是“居中”和“可滚动”被当成互斥需求——其实两者可以共存，关键在overflow属性没加对位置。
- 只给子元素设
overflow: auto没用，它控制的是子元素自身是否滚动，不是父容器 - 必须把
overflow: auto或overflow-y: auto加在 flex 容器上（即父元素），否则内容超出后直接被裁剪或撑开容器 - 如果容器高度是
height: 100vh，记得同时设box-sizing: border-box，避免padding/border额外增加高度导致溢出不可控 - IE11不支持
overflow: overlay，老项目用overflow: auto更稳妥
子元素高度动态变化时flex垂直居中偏移
常见于文字行数不确定、图片加载中占位、或响应式字体缩放场景——align-items: center本身没问题，但父容器高度没“锁死”就会跟着变。
- 避免只用
min-height: 100vh：内容少时高度收缩，居中基准丢失；内容多时又没滚动，直接溢出 - 推荐组合：
height: 100vh+overflow-y: auto，既固定高度锚定居中参考系，又允许内容滚动 - iOS Safari 中
100vh可能因地址栏收起/展开跳变，补一句min-height: 100%并确保html, body { height: 100% } - 不要依赖
margin: auto做垂直居中：它在单子元素场景下有效，但一旦内容溢出，auto外边距会失效或计算异常
flex容器里有多个子元素，只想其中一个垂直居中
这时候align-items: center会对所有子项生效，容易把不需要居中的元素也拉上去——得用更细粒度的控制。
- 给目标子元素单独设
align-self: center，它会覆盖容器级的align-items - 如果该子元素是文本或行内元素（如
span），先确认它没被vertical-align干扰；必要时加display: inline-block再设align-self - 注意
align-self只对 flex 项目生效，所以父容器必须是display: flex，且该元素是它的直接子元素 - 若目标元素需要“绝对居中”（比如模态框），优先用
position: absolute+transform: translate(-50%, -50%)，不依赖 flex 布局逻辑
Grid方案比Flex更简单？什么时候该换
当容器里就一个子元素，且你不想操心高度、溢出、兼容性这些细节时，place-items: center确实更省事——但它不是万能替代。
立即学习“前端免费学习笔记（深入）”；
-
display: grid; place-items: center天然支持内容溢出滚动，只要容器有明确尺寸+overflow: auto - IE11不支持
place-items，需回退到justify-content: center; align-content: center（注意是align-content，不是align-items） - Grid 对多行/多列布局更自然，但 Flex 在一维流式排列（比如导航栏、表单字段）上语义更清晰
- 别为了居中硬切 Grid：如果整个页面已用 Flex 构建，只为一个盒子改 Grid，反而增加维护成本
overflow的配合关系——这两个属性必须一起出现，缺一不可。单写居中或单写滚动，都会让效果看起来“一半生效”。 
