CSS如何实现元素在容器内居中_利用margin-auto技巧

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（比如 span），margin: auto 完全不生效为什么 margin:auto 垂直居中常常失败？因为块级元素的默认文档流高度由内容撑开，margin: auto 在垂直方向上无法触发居中逻辑 ------ 浏览器不知道"上下各留多少"，也就不会计算。典型错误现象：margin: auto 写了上下值，但元素顶部紧贴父容器，毫无反应。立即学习"前端免费学习笔记（深入）"； VWO 一个A/B测试工具