flex布局中子元素水平垂直居中需父容器设display: flex、min-height: 100vh，再用justify-content: center和align-items: center；二者仅作用于直接子元素，且margin: auto在flex容器中不适用传统居中逻辑。
flex布局中用justify-content和align-items居中子元素
父容器设为display: flex后，子元素的水平+垂直居中只需两行声明。关键点在于：这两个属性只对**直接子元素**生效，且要求父容器有明确高度（否则align-items: center可能无效）。
常见错误是给子元素自身加margin: auto——在flex容器里它会被忽略，除非该子元素是唯一子项且未设置flex相关属性。
- 水平居中：
justify-content: center - 垂直居中：
align-items: center - 若子元素是块级且需自适应宽高，建议加
margin: 0避免默认外边距干扰 - 单行内联元素（如
）在flex容器中会自动拉伸，必要时用white-space: nowrap防换行
块级元素用margin: auto实现水平居中
margin: auto能让块级元素在父容器中水平居中，但有两个硬性前提：元素必须有**明确宽度**（不能是width: auto且内容撑开），且父容器不能是display: flex或display: grid（此时auto外边距行为不同）。
典型错误是给
margin: auto却没写width，结果毫无反应；或者在flex父容器里混用，导致布局失效。立即学习“前端免费学习笔记（深入）”；
- 必须设置宽度：
width: 200px或max-width: 80% - 避免同时设
Float或position: absolute，否则margin: auto不生效 - 仅支持水平居中，垂直方向无效（除非配合
position: absolute+top: 50%+transform: translateY(-50%)）
flex和margin: auto混用时的冲突表现
当父容器是display: flex，又给子元素设margin: auto，实际效果是：该子元素会在**主轴方向**（row为水平，column为垂直）占满剩余空间，而其他方向的auto外边距会将其推到边缘——这常被误认为“居中失败”。
比如父容器flex-direction: row，子元素设margin: auto，它会紧贴右边界；若设margin: auto 0，则水平居中但垂直贴顶。
- flex容器中
margin: auto本质是“吸走相邻空白”，不是传统居中逻辑 - 想兼容老浏览器（IE10+）又需垂直居中，优先选
display: table-cell+vertical-align: middle，而非依赖margin: auto - 调试时用浏览器开发者工具检查computed样式，确认
margin值是否被flex重计算
响应式场景下居中的稳定写法
移动端或动态尺寸下，靠固定width + margin: auto容易溢出，而flex的align-items在无高度容器中会失效。稳妥做法是：父容器用min-height: 100vh保底，子元素用max-width + margin: auto，再叠加flex双居中兜底。
真正容易被忽略的是box-sizing——如果子元素有padding或border，又没设box-sizing: border-box，width: 100%会超出父容器，导致margin: auto偏移。
- 统一重置：
* { box-sizing: border-box; } - 父容器高度至少为
min-height: 100vh，避免flex垂直居中塌陷 - 子元素用
max-width: 90%替代width: 90%，防止小屏下文字撑破