先记住这个答案
空状态卡片四周写 margin: auto 能居中，是因为容器在两个轴上都有正向剩余空间，自动外边距把各轴余量分开吸收。若卡片比容器还宽或还高，相应方向就没有可分的正余量，不会神奇地缩小内容。检查居中失效时，先确认容器尺寸，再看交叉轴是否有明确高度。
- 四边
auto可让单项双轴居中 - 没有正向余量时不能居中
- 多个自动边距会分摊余量
- 它优先于主轴剩余空间对齐
单张空状态卡片居中
全屏空状态页面只有一张提示卡，容器用 Flex，卡片写 margin: auto 就可以居中。若提示卡的内容变长，高度超过视口，垂直方向已经没有余量；卡片不会神奇压缩到视口内。应允许页面滚动，或调整卡片最大宽度和内部换行。这个写法适合单个块的居中，但别把它当作任意尺寸下的裁剪方案。
.empty-state {
display: flex;
min-height: 100vh;
}
.empty-state__card {
margin: auto; /* 四个方向的可用余量由外边距吸收 */
max-width: min(90vw, 480px);
}卡片四边自动外边距吸收两个轴上可用的正余量。
自动外边距先吸收正向余量
主轴上的自动外边距在 justify-content 分配剩余空间之前取得正余量；所以一个项目的两个自动主轴外边距会平分空间。交叉轴上的自动外边距也可以覆盖一般的 align-self 对齐效果。多个项目都带自动外边距时，剩余空间按自动外边距的数量分配，不等于“每个项目各自居中”。项目本身的尺寸和最小尺寸限制仍照常参与布局。
交叉轴尤其要注意容器高度。如果容器高度由卡片自身撑开，竖直方向没有可分配的余量，四边 auto 也不会让卡片看起来垂直居中。把容器高度设为 300px、卡片高度设为 100px，再观察上下自动边距各吸收多少空间，现象才清楚。若容器里还有第二张卡片，多个自动边距会共同分配余量，原来居中的单卡布局就可能偏移；此时先确定你想居中单项还是整组。
若只希望水平居中，就只在主轴方向设置自动边距；四边同时设置可能把纵向位置也改变。需要整组子项居中时，通常由容器的对齐属性处理更直接。自动边距更适合让某一个项目吸收空白，或者把同一行的项目分成两组。
容易答错的地方
- 认为
margin: auto总能居中 - 只有相应轴存在可分配的正向余量时才成立；内容比容器大时，要另行处理溢出。
- 认为它与
justify-content: center完全等价 - 自动外边距先拿走正向余量，还可只推开某一侧；
justify-content是对整组项目进行主轴对齐。
面试官还会怎么问？
只写 margin-left: auto 会怎样？
在水平行方向里，它吸收左侧剩余空间，把该项推向右侧；但在 RTL 或其他方向下，应核对物理左侧是否真是你要的主轴起始侧。
两个项目都写 margin: auto 会怎样？
有余量时，每个自动外边距都参与分配，不会各自独立占据容器中心。
想让整组项目居中该用哪个？
整组同向居中通常用 justify-content: center 和 align-items: center；单项吸收余量时才用自动外边距更直观。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。