`） 结合 `left: 50%` 和 `transform` 适用于绝对定位的元素，需计算偏移量 `inline-block` + `text-align` 内联元素 设置父容器为 `text-align: center`，子元素为 `display: inline-block` 适用于多个内联元素的水平排列 二、使用场景建议 - 文本使用 `text-align: center` 最直接。 - 固定宽度的块元素：推荐使用 `margin: 0 auto`。 - 响应式布局：优先考虑 `flexbox` 或 `grid`，便于适应不同屏幕尺寸。 - 绝对定位元素：结合 `left: 50%` 和 `transform` 实现精确居中。 - 多个内联元素：通过 `inline-block` 加上 `text-align` 实现整体居中。 三、注意事项 - 某些方法需要配合其他样式使用，例如 `margin: 0 auto` 必须设置宽度。 - `flexbox` 和 `grid` 是现代浏览器广泛支持的布局方式，但在旧版浏览器中可能需要兼容处理。 - 在使用 `transform` 时，注意其对性能的影响，避免频繁触发重排。 通过合理选择和组合这些方法，可以轻松实现各种元素的水平居中效果，提升页面美观性和用户体验。