flex居中需同时设置justify-content和align-items，仅设其一只能单向居中；父容器必须display: flex，ie11需height: 100%配合min-height: 100vh，safari中图片按钮需max-width: 100%防溢出。
flex 居中时 justify-content 和 align-items 必须同时设置
只写 justify-content: center 只能水平居中，只写 align-items: center 只能垂直居中；两者缺一不可。常见错误是漏掉其中一个，导致内容只在单方向居中。
实际写法：
.container {
display: flex;
justify-content: center;
align-items: center;
}
- 必须给父容器设
display: flex，否则两个属性无效 - 如果子元素是单行文本或内联元素，建议加
flex-wrap: wrap防止换行异常（尤其响应式场景） - IE10–11 对
align-items: center支持正常，但不支持align-content，所以别混用
IE11 下 min-height: 100vh 可能失效，需补 height: 100%
想让弹性容器撑满视口高度时，仅靠 min-height: 100vh 在 IE11 中常被忽略，表现为容器高度塌陷、居中失效。
可靠写法：
html, body {
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
height: 100%; /* IE11 必加 */
}
- IE11 不识别
vh单位在min-height上的计算逻辑，必须显式声明height: 100%向上继承 - 若页面有滚动条，
100vh在 iOS Safari 中可能包含地址栏高度，此时改用100dvh（但 IE 不支持，慎用） - 不要依赖
flex: 1替代高度设置——它只对 flex 项生效，不解决父容器高度问题
移动端 Safari 中 flex 容器内 img 或 button 可能溢出
默认情况下，Safari 会把 img、button 等替换元素当作“不可伸缩”处理，即使父容器设了 align-items: center，它们也可能因固有尺寸顶出边界。
解决方式：
.container > img,
.container > button {
max-width: 100%;
height: auto;
}
- 不加
max-width: 100%时，大图在窄屏下直接突破容器宽度，破坏居中布局 - 若使用
object-fit，注意 iOS 12.2+ 才完全支持，旧版本需降级为background-image方案 - 按钮类元素建议统一设
flex-shrink: 0避免被压缩变形，但要配合max-width控制上限
用 margin: auto 居中子项时，必须满足两个前提条件
有人尝试对 flex 子项单独设 margin: auto 实现居中，这确实可行，但极易失败——因为它的生效依赖严格条件。
正确用法：
.container {
display: flex;
}
.item {
margin: auto; /* 水平+垂直同时居中 */
}
- 父容器必须是
display: flex，且不能设flex-direction: column（否则margin: auto只垂直生效） - 子项不能设
flex-grow或flex-shrink干扰自动外边距计算 - 该写法在 IE10–11 中兼容性差：IE11 支持，IE10 完全不识别
margin: auto在 flex 里的行为
真正麻烦的不是写几行 CSS，而是不同浏览器对「尺寸继承」「替换元素默认行为」「vh 单位解析」的细微差异。这些坑往往只在特定设备或缩放比例下暴露，上线前务必在真机 + IE11 模拟器里跑一遍最小可复现页面。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
