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，则水平居中但垂直贴顶。
margin: auto本质是“吸走相邻空白”，不是传统居中逻辑display: table-cell + vertical-align: middle，而非依赖margin: auto
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%，防止小屏下文字撑破
