块级元素设置固定宽度和margin: auto可实现水平居中，需父容器非绝对定位且元素不浮动；适用于传统布局，但复杂场景多用Flex或Grid替代。
使用 margin: auto 在 CSS 盒模型中实现元素居中，是一种常见且有效的水平居中方法。它主要适用于块级元素，并在特定条件下生效。
基本原理：margin 自动分配空间
当一个块级元素设置了固定宽度（width），并且左右外边距（margin）设置为 auto 时，浏览器会自动计算并平均分配剩余的水平空间给左右 margin，从而实现水平居中。
关键条件是：元素必须有明确的宽度，且不能是 100% 或 unset 等占满父容器的情况。
示例代码：
立即学习“前端免费学习笔记（深入）”；
.centered-box {
width: 300px;
margin: 0 auto; /* 上下 margin 为 0，左右为 auto */
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
}
适用场景与限制
- 只对块级元素有效，行内元素需先转为 block 或 inline-block。
- 只能实现水平居中，垂直居中需要其他方法（如 flex、position 配合等）。
- 父容器应具有明确的宽度（通常为非绝对定位的常规流容器）。
- 若元素浮动（float）或绝对定位（position: absolute），则 auto margin 不再居中，除非配合 left/right 设置。
结合现代布局方式的对比
虽然 margin: auto 简单可靠，但在复杂布局中常被更灵活的方法替代：
-
Flexbox：父元素设为
display: flex; justify-content: center;可轻松居中子元素。 -
Grid：使用
justify-items: center或justify-content: center实现居中。 - 仍可使用
margin: auto在 Flex 或 Grid 子项上进行独立居中控制。
基本上就这些。只要记住：固定宽度 + 块级元素 + margin: auto = 水平居中，这个组合在传统布局中非常实用。
