掌握CSS水平居中需理解盒模型与宽度行为，主流方法有两种：1. 使用margin: auto，适用于固定宽度的块级元素，通过设置宽度和左右外边距自动分配实现居中；2. 使用Flexbox，父容器设为display: flex并配合justify-content: center，可灵活居中子元素，尤其适合动态或响应式布局。选择依据场景：简单居中用margin: auto，复杂布局选Flexbox。
水平居中在CSS布局中很常见，但对初学者来说容易混淆。关键在于理解盒模型和容器的宽度行为。只要掌握两种主流方法——margin: auto 和 Flexbox，大多数居中需求都能轻松解决。
使用 margin: auto 实现块级元素居中
这是最经典的方式，适用于固定宽度或设定宽度的块级元素。
当一个块级元素设置了明确的宽度，且左右外边距（margin）设为 auto，浏览器会自动分配左右空间，实现水平居中。
- 确保元素是块级（如 div、p），或通过 display: block 设置
- 给元素设置 width，否则它会默认占满父容器，无法看出居中效果
- 设置 margin: 0 auto —— 上下 margin 为 0，左右由浏览器自动均分
居中的内容
使用 Flexbox 简化居中控制
现代布局推荐使用 Flexbox，它更灵活，无需设置子元素宽度也能居中。
立即学习“前端免费学习笔记（深入）”；
将父容器设为 flex 布局，再用 justify-content 控制主轴对齐方式即可。
- 父元素设置 display: flex
- 使用 justify-content: center 实现子元素水平居中
- 适合动态宽度、多个子项或响应式场景
居中内容
选择合适的方法取决于场景
如果只是让一个简单盒子居中，margin: auto 足够且兼容性好。如果布局复杂、需要垂直居中或对齐多个项目，Flexbox 更高效直观。
基本上就这些，不复杂但容易忽略细节。关键是清楚元素是否块级、是否有宽度，以及父容器的布局模式。
