flex居中需justify-content和align-items同时设在display: flex的父容器上，且父容器须有明确高度（如100vh），否则垂直居中失效；子元素勿用margin: auto，inline元素需转为block；注意box-sizing、padding、border对视觉居中的干扰；IE11存在兼容问题，需加-ms-前缀并避免100vh；绝对定位+transform是兼容性最佳替代方案。
flex布局居中：为什么justify-content和align-items要一起用
单靠justify-content: center只能水平居中，单靠align-items: center只能垂直居中；两者必须同时设在父容器上，且父容器需是display: flex。常见错误是只写一个属性，或者忘了给父元素设height（尤其在body或section里），导致子元素“垂直方向没空间可居中”。
实操建议：
- 父容器必须有明确高度（比如
height: 100vh或min-height: 100vh），否则align-items在无高度约束时可能无效 - 避免对子元素单独设
margin: auto——flex下它不触发居中逻辑，纯属冗余 - 如果子元素是
inline类（如span），先确保它被display: block或display: inline-block包裹，否则flex主轴对其不生效
盒模型干扰：padding/margin/border怎么悄悄破坏居中效果
flex居中计算的是内容区（content box）的中心，但如果你给父容器加了padding，或子元素有margin、border，视觉上会偏移。更隐蔽的是box-sizing默认为content-box，此时width: 100%的子元素实际占满内容区，但加上padding后整体就溢出了。
实操建议：
- 父容器统一设
box-sizing: border-box，避免padding撑大容器尺寸 - 子元素慎用
margin——flex居中不依赖它，反而容易叠加偏移 - 若需内边距，优先加在子元素内部（比如子元素里再包一层
div设padding），而不是直接作用于居中目标本身
兼容性陷阱：IE11对flex居中的几个致命限制
IE11支持flex，但align-items: center在flex-direction: column下会失效；另外，IE11不支持min-height: 100vh在flex容器上的正确解析，常导致垂直方向塌陷。
实操建议：
- 必须兼容IE11时，改用
display: -ms-flexbox前缀，并显式写-ms-flex-align: center和-ms-flex-pack: center - 避免在IE11中依赖
100vh，改用height: 100%并确保所有祖先元素（html/body/父容器）都设了height: 100% - 不要用
flex: 1代替flex: 1 1 auto——IE11对简写解析不稳定，易导致子元素不伸缩
替代方案对比：什么时候不该用flex居中
flex适合已知结构、现代浏览器为主的场景；但如果要居中的元素尺寸完全未知，且需兼容老浏览器（如IE9及以下），或父容器本身是position: absolute定位的，flex反而增加复杂度。
实操建议：
- 绝对定位+transform：父容器
position: relative，子元素position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)，兼容性最好，但需注意transform性能在低端安卓机上略差 - table-cell方案已基本淘汰——
display: table-cell+vertical-align: middle虽兼容，但语义混乱、响应式困难，仅作历史参考 - grid方案（
display: grid; place-items: center）更简洁，但Safari 10.1以下不支持，上线前务必查place-items的实际覆盖范围
真正麻烦的不是选哪种方法，而是混用不同机制：比如父容器用flex，子元素又加absolute，还试图用margin auto——这时候居中逻辑已经互相打架了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
