使用弹性布局
html
<div class="box flex-center">
<div class="inner"></div>
</div>css
.flex-center {
background-color: #333333;
display: flex; /* 开启弹性布局 */
justify-content: center; /* 主轴（默认水平）居中 */
align-items: center; /* 交叉轴（默认垂直）居中 */
width: 400px;
height: 400px;
}
.inner {
background-color: #f0f0f0;
width: 100px;
height: 100px;
}原理：
display: flex使父元素成为「弹性容器」，子元素成为「弹性项目」；justify-content: center：控制弹性项目在主轴（默认水平） 上的对齐方式，将剩余空间平均分配到项目左右两侧，实现水平居中；align-items: center：控制弹性项目在交叉轴（默认垂直） 上的对齐方式，将剩余空间平均分配到项目上下两侧，实现垂直居中；- 优势：无需关心子元素宽高，适配「定宽/不定宽、定高/不定高」所有场景，是现代布局首选。
使用网格布局
html
<div class="box grid-center">
<div class="inner"></div>
</div>css
.grid-center {
background-color: #b9b5b5;
width: 400px;
height: 400px;
display: grid; /* 开启网格布局 */
place-items: center; /* 简写：同时设置 justify-items + align-items */
}
.inner {
background-color: greenyellow;
width: 100px;
height: 100px;
}原理：
display: grid使父元素成为「网格容器」，子元素默认占据一个「网格单元格」；place-items: center是justify-items: center（单元格内水平居中）和align-items: center（单元格内垂直居中）的简写；- 网格布局的单元格默认大小与容器一致，因此子元素会在容器内水平+垂直居中；
- 优势：代码极简（仅2行核心属性），支持多元素、复杂网格场景的居中，兼容性（IE11+）满足现代项目需求。
margin:auto 居中（Flex 加持）
html
<div class="box margin-auto-center">
<div class="inner"></div>
</div>css
.margin-auto-center {
background-color: #333333;
display: flex; /* 关键：开启Flex布局 */
width: 400px;
height: 400px;
}
.margin-auto-center .inner {
background-color: #f0f0f0;
width: 100px;
height: 100px;
margin: auto; /* 核心：自动分配所有方向的剩余空间 */
}核心说明：
- 常规流中（父元素非Flex/Grid）：
margin: auto仅能水平居中（垂直方向无剩余空间可分配）； - Flex布局中：
margin: auto会同时在「主轴+交叉轴」分配剩余空间，因此实现水平+垂直居中； - 注意：子元素需为「块级/弹性项目」，若父元素无固定高度，垂直居中效果会失效（无剩余空间）。
原理：
- Flex容器会将内部剩余空间优先分配给
margin: auto的项目； - 当子元素设
margin: auto时，上下左右的margin会自动填充容器的剩余空间，从而将元素“挤到”容器中心。
使用定位+位移
html
<div class="box position-transform-center">
<div class="inner"></div>
</div>css
.position-transform-center {
background-color: #b9b5b5;
width: 400px;
height: 400px;
position: relative; /* 关键：父元素相对定位，作为子元素定位基准 */
}
.position-transform-center .inner {
background-color: greenyellow;
width: 100px;
height: 100px;
position: absolute; /* 子元素绝对定位，脱离常规流 */
top: 50%; /* 先将元素顶部对齐容器垂直中点 */
left: 50%; /* 先将元素左侧对齐容器水平中点 */
transform: translate(-50%, -50%); /* 核心：元素自身向左/上偏移50%宽高 */
}核心说明：
- 绝对定位的参考基准是「最近的已定位祖先」（父元素
position: relative是关键）； top: 50%/left: 50%是相对于容器的50%，此时元素的「左上角」会对齐容器中心，而非元素中心；transform: translate(-50%, -50%)是相对于元素自身的50%宽高，将元素中心对齐容器中心；- 优势：无需知道元素宽高（适配不定宽高场景），不影响其他元素布局（脱离文档流），适合弹窗、悬浮层。
原理：
- 绝对定位的坐标原点是容器左上角，
top/left: 50%使元素左上角移动到容器中心； - CSS
transform的translate函数以元素自身宽高为基准，-50%抵消元素自身的偏移，最终实现中心对齐。
使用定位+margin:auto
html
<div class="box position-margin-auto-center">
<div class="inner"></div>
</div>css
.position-margin-auto-center {
background-color: #b9b5b5;
width: 400px;
height: 400px;
position: relative; /* 父元素相对定位 */
}
.position-margin-auto-center .inner {
background-color: greenyellow;
width: 100px;
height: 100px;
position: absolute; /* 子元素绝对定位 */
inset: 0; /* 简写：top:0; right:0; bottom:0; left:0; */
margin: auto; /* 核心：自动填充所有方向剩余空间 */
}核心说明：
inset: 0使绝对定位的子元素拉伸至容器边缘（但子元素有固定宽高，因此不会真的拉伸）；margin: auto会在「top/bottom/left/right」四个方向自动分配剩余空间，从而将元素推到容器中心；- 注意：子元素必须有固定宽高（否则会被拉伸至容器大小），适合已知宽高的弹窗、卡片。
原理：
- 绝对定位元素设置
inset: 0后，其可分配的空间范围等于父容器的宽高； margin: auto在绝对定位场景下，会将上下左右的margin值计算为“剩余空间/2”，最终实现元素居中。
补充：各方案对比表
| 方案类型 | 核心优势 | 适用场景 | 注意事项 |
|---|---|---|---|
| Flex 居中 | 适配所有宽高、代码简洁 | 常规布局、多元素居中 | 兼容 IE10+ |
| Grid 居中 | 代码极简（1行核心属性） | 单元素居中、网格布局 | 兼容 IE11+（需前缀） |
| margin:auto（Flex） | 无定位依赖、不脱离文档流 | 常规块级元素居中 | 父元素需开启 Flex |
| 定位+transform | 脱离文档流、适配不定宽高 | 弹窗、悬浮层、动态元素 | 需父元素相对定位 |
| 定位+margin:auto | 无需位移、代码简洁 | 已知宽高的固定元素 | 子元素必须定宽高 |