CSS 边距自动居中技巧

知识点	说明
基本原理	将元素外边距（margin）根据容器内的可用剩余空间进行平均分配。
适用场景	主要用于块级元素的水平居中、Flex/Grid 子项的对齐、绝对定位元素的双轴居中。
关键前提	元素必须有可供分配的剩余空间。例如，在普通流中，块级元素的宽度不能占满父容器。
现代布局	在 Flexbox 和 Grid 布局中，`margin: auto` 的能力被放大，可用于主轴和交叉轴的空间分配。

布局类型	核心用法	必要条件	CSS 实现	效果说明
普通文档流	水平居中	1. 元素为块级 (`display:block`) 2. 必须设置 `width` 或 `max-width` (且不为 100%)	`margin: 0 auto;`	元素在其父容器内水平居中。`margin-top` 和 `margin-bottom` 在此场景下不起垂直居中作用。
Flexbox 布局	单个子项完全居中	父元素 `display: flex;`	子元素: `margin: auto;`	子元素在 Flex 容器中同时实现水平和垂直居中，因其外边距会吸收所有剩余空间。
Flexbox 布局	单个子项推向一侧	父元素 `display: flex;`	子元素: `margin-left: auto;` (推向右侧)	`margin-left: auto` 会占据所有左侧的剩余空间，将元素推到容器的最右边。常用于导航栏布局。
Grid 布局	单个子项完全居中	父元素 `display: grid;`	子元素: `margin: auto;`	与 Flexbox 类似，子元素在 Grid 容器中可同时实现水平和垂直居中。
绝对定位	元素完全居中	1. 父元素有定位上下文 (`position: relative;` 等) 2. 子元素 `position: absolute;` 3. 子元素设置了固定的 `width` 和 `height` 4. 子元素设置了 `inset: 0;` (或 `top/right/bottom/left: 0;`)	子元素: `margin: auto;`	`margin: auto` 会在四个方向的拉伸中自动计算外边距，使元素在定位父容器内完全居中。

常见问题	原因分析	解决方案
块级元素未水平居中	元素没有设置固定的 `width` 或 `max-width`，导致其宽度默认为 `auto` (占满一行)，没有可供分配的水平空间。	为元素设置一个明确的 `width` 或 `max-width`。
行内元素 (`inline`) 无效	`margin-left/right: auto` 对 `display: inline` 的元素不起作用，因为其宽高由内容决定且不占据独立行。	1. 将元素改为 `display: block` 或 `display: inline-block` 并设置宽度。 2. 在其父元素上使用 `text-align: center;`。
在普通流中无法垂直居中	在非 Flex/Grid 布局中，`margin-top: auto` 和 `margin-bottom: auto` 的计算值通常为 `0`，不能实现垂直居中。	1. 使用 Flexbox (`align-items: center`) 或 Grid 布局。 2. 使用绝对定位居中法。 3. 其他垂直居中技术。