`标签居中，可以通过多种方式实现，包括使用Flexbox、Grid、绝对定位、文本对齐等方法。不同的方法适用于不同的场景，选择合适的方案可以提高代码的可维护性和兼容性。 - Flexbox 是最常用且简单的方式，适合现代浏览器。 - Grid 提供了更强大的布局能力，适合复杂结构。 - 绝对定位 + transform 可以实现精确的居中，但需要知道父容器的尺寸。 - text-align 和 line-height 仅适用于单行文本的水平居中。 二、表格对比 方法 实现方式 适用场景 是否支持旧版浏览器 优点 缺点 --- Flexbox `.div { display: flex; justify-content: center; align-items: center; }` 简单布局，多元素居中 支持较好（IE10+） 简洁易用，兼容性好 需设置父容器为flex Grid `.div { display: grid; place-items: center; }` 复杂布局，多元素居中 支持较好（IE11+） 功能强大，布局灵活 学习曲线稍高 绝对定位 + transform `.div { position: relative; } .p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }` 固定尺寸容器 支持较好 精确控制位置 需知道容器大小 text-align + line-height `.div { text-align: center; line-height: 100px; } .p { display: inline-block; vertical-align: middle; }` 单行文本居中 支持广泛 简单直接 不适合多行或复杂布局 三、小结 根据实际需求选择合适的居中方式非常重要。如果只是简单的文本居中，使用`text-align`和`line-height`就足够；如果是复杂的布局，推荐使用Flexbox或Grid；而需要精准控制位置时，可以结合绝对定位和transform。 通过合理运用这些技术，可以让页面更加美观、布局更加灵活。