margin: auto 可实现块级元素水平居中，需设置固定宽度且仅对块级元素有效；行内元素应使用 text-align: center；垂直居中需结合绝对定位才能生效；现代布局推荐使用 Flexbox 实现更灵活的居中效果。
在CSS中，使用 margin: auto 是实现元素居中的常用方法之一。它主要适用于块级元素的水平居中，但有一定的前提条件和使用限制。下面介绍几种常见的居中场景及其实现技巧。
1. 水平居中块级元素
要让一个块级元素在其父容器中水平居中，可以设置左右外边距为 auto，同时指定元素的宽度。
说明：- 元素必须是块级元素（如 div、p 等）。
- 必须设置固定的或最大宽度（width），否则元素会默认占满父容器，无法看出居中效果。
.center-box {
width: 300px;
margin: 0 auto; /* 上下 margin 为 0，左右自动分配 */
background-color: #f0f0f0;
}
这样，该 div 就会在其父容器中水平居中。
2. 不适用的情况：行内元素或 display: inline-block
margin: auto 对行内元素无效。如果希望居中行内内容（如文字），应使用父元素的 text-align: center。
立即学习“前端免费学习笔记（深入）”；
示例：
.parent {
text-align: center;
}
.child {
display: inline-block;
/* margin: auto 不起作用 */
}
3. 垂直居中？margin: auto 的局限性
很多人误以为 margin: auto 能实现垂直居中，但实际上，在标准文档流中，它对垂直方向的效果有限。
- 只有在绝对定位 + 明确偏移量的情况下，margin: auto 才能实现垂直甚至水平垂直都居中。
.absolute-center {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
width: 200px;
height: 100px;
margin: auto; /* 水平垂直同时居中 */
background: #333;
}
这里利用了绝对定位将元素四边拉伸，浏览器自动计算 margin 实现居中。
4. 配合 Flex 更灵活的居中方案
虽然 margin: auto 可以完成部分居中任务，但在现代布局中，Flexbox 更加直观和强大。
示例：使用 Flex 居中子元素
.flex-container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh;
}
此时子元素无需设置宽度或 margin，也能完美居中。
基本上就这些。margin: auto 是个简单有效的水平居中技巧，但要清楚它的使用边界。遇到复杂布局时，推荐结合 Flex 或 Grid 使用，更省心也更可控。
