块级元素设置固定宽度并使用margin: auto可实现水平居中，适用于div等块级元素，需注意元素不能为inline或浮动、绝对定位，否则需改用text-align或Flexbox等方法。
在CSS中使用 margin: auto 实现水平居中，是一种常见且有效的布局方式。它主要适用于块级元素，通过将左右外边距（margin）设置为自动，使元素在其容器中水平居中。
实现条件
要让 margin: auto 正常工作并实现水平居中，需满足以下两个基本条件：
- 元素必须是块级元素（如 div、p 等），或通过 display: block; 显式设置
- 元素必须设置固定的宽度（width），否则 width 默认为 100%，无法产生“居中”空间
基本用法示例
以下是一个典型的水平居中代码示例：
立即学习“前端免费学习笔记（深入）”；
BJXSHOP网上开店专家
下载
BJXShop网上购物系统是一个高效、稳定、安全的电子商店销售平台，经过近三年市场的考验，在中国网购系统中属领先水平；完善的订单管理、销售统计系统；网站模版可DIY、亦可导入导出；会员、商品种类和价格均实现无限等级；管理员权限可细分；整合了多种在线支付接口；强有力搜索引擎支持... 程序更新：此版本是伴江行官方商业版程序，已经终止销售，现于免费给大家使用。比其以前的免费版功能增加了：1，整合了论坛
.center-box {
width: 300px; /* 设置固定宽度 */
margin: 0 auto; /* 上下 margin 为 0，左右为 auto */
}
HTML 结构：
我已水平居中
此时该 div 会在其父容器内水平居中显示。
原理说明
当一个块级元素设置了宽度后，它的总占用空间为：
width + margin-left + margin-right + padding + border
CSS 在计算布局时，若 margin-left 和 margin-right 都设为 auto，浏览器会平均分配剩余可用空间给左右外边距，从而实现水平居中。
注意事项
- 如果元素是 inline 或 inline-block，margin: auto 不起作用，应改用父元素设置 text-align: center
- 浮动（float）、绝对定位（position: absolute）的元素会脱离正常文档流，margin: auto 居中失效，除非配合 left/right 定位调整
- Flexbox 和 Grid 布局提供了更现代的居中方案，但在简单场景下，margin: auto 依然简洁高效
基本上就这些，只要记住：块级 + 固定宽度 + margin: auto，就能轻松实现水平居中。
