使用 margin: auto 实现水平居中需元素为块级且设置固定宽度，浏览器自动分配左右外边距，常用于居中容器、表单等，不适用于内联元素或弹性子项。
要使用 margin: auto 实现水平居中对齐元素，关键在于让元素的左右外边距自动分配可用空间。这通常适用于块级元素，并且需要满足一定条件。
基本原理
当一个块级元素设置了固定宽度（width），并且其左右外边距（margin-left 和 margin-right）设置为 auto 时，浏览器会自动计算左右边距的值，使元素在父容器中水平居中。
示例代码：
.center {
width: 300px;
margin: 0 auto; /* 上下 margin 为 0，左右 margin 自动 */
}
上面的写法等价于：
立即学习“前端免费学习笔记（深入）”；
.center {
width: 300px;
margin-left: auto;
margin-right: auto;
}
适用条件
要成功实现居中，需满足以下几点：
- 元素必须是块级元素（
display: block或默认块级） - 元素必须设置明确的
width，否则宽度默认为100%，无法看出居中效果 - 父容器没有限制导致居中失效（如浮动、绝对定位未正确处理）
常见应用场景
这种方法常用于居中页面中的内容区块，比如：
- 居中网页主容器（如
.container） - 居中表单或图片展示框
- 居中固定宽度的提示框或卡片
不适用的情况
以下情况 margin: auto 无法实现水平居中：
- 元素是内联元素（
inline），应使用text-align: center在父元素上 - 元素是弹性盒子（
flex item），应使用justify-content控制 - 元素设置了浮动（
float）或绝对定位（position: absolute）而未配合其他调整
基本上就这些。只要掌握好条件和写法，margin: auto 是实现水平居中最简单有效的方式之一。
