margin:auto仅在父容器和子元素均设明确宽高、子元素为非浮动非绝对定位的block/inline-block时可水平居中垂直居中需配合绝对定位或flex单纯块级元素无法生效。margin:auto 在什么情况下能居中只对 display 为 block 或 inline-block 的元素在其父容器设置了明确宽度或高度且该元素本身也有明确宽度或高度时margin: auto 才会水平或垂直居中。常见误用给一个没设宽的 div 写 margin: auto它会占满父容器左右 margin 都是 0 —— 因为没有“剩余空间”可分配。必须同时满足父容器有宽度、子元素有宽度、子元素是块级非 float、非 position: absolute垂直方向上margin: auto 对普通块级元素无效除非是 flex 子项或绝对定位如果子元素是 inline比如 spanmargin: auto 完全不生效为什么 margin:auto 垂直居中常常失败因为块级元素的默认文档流高度由内容撑开margin: auto 在垂直方向上无法触发居中逻辑 —— 浏览器不知道“上下各留多少”也就不会计算。典型错误现象margin: auto 写了上下值但元素顶部紧贴父容器毫无反应。立即学习“前端免费学习笔记深入” VWO 一个A/B测试工具