居中需设width+margin:auto或flex，因它是块级元素，text-align对其无效；width为auto时margin:auto不生效，兼容IE8需加display:block；伪元素方案更灵活但牺牲语义。

水平线用

---

时，text-align: center 为什么无效

因为

---

是块级元素，默认独占一行，text-align 只对行内内容起作用，对块本身没影响。强行加 text-align: center 到父容器，只是让“看不见的换行符”居中，不是

---

居中。

• 别给

  ---

  父元素设 text-align: center，这是常见误解
• 想居中，得控制

  ---

  自身的盒模型：要么设宽度 + margin: auto，要么用 flex
• 旧版 IE 对 margin: auto 支持不稳定，如果还要兼容 IE8，得额外加 width 和 display: block

margin: auto 居中

---

的必要条件

必须显式设置 width（哪怕 width: 100%），否则 margin: auto 在块级元素上不触发居中行为——浏览器会把左右 margin 都算成 0。

• ---

  ✅ 有效

• ---

  ❌ 无效（宽度为 auto，居中失效）
• 如果设 width: 100%，那 margin: auto 实际没效果，因为已占满容器
• 注意外边距单位：用 rem 或 em 比 px 更易维护，但别混用

用 Flex 布局替代 margin: auto 的适用场景

当

---

在一个需要统一布局逻辑的容器里（比如卡片、表单分隔），用 flex 更可控，也避免意外继承 text-align。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 父容器加 display: flex + flex-direction: column，再给

  ---

  加 align-self: center
• 或者父容器设 display: flex + justify-content: center，但需确保

  ---

  不是唯一子元素，否则可能撑满
• Flex 下不用管 width，align-self 会尊重原始宽度；但若想限制长度，仍要设 width
• 注意 Safari 旧版本对 align-self 在

  ---

  上的支持有 bug，可降级为 margin: auto 保底

伪元素画线比

---

更灵活的时机

当水平线需要和文字联动（如“或”字居中，线从左右延伸）、或要精确控制颜色/粗细/圆角时，

---

很难满足，该换思路。

• 用
  或
  + ::before/::after 画线，文字作为内容自然居中
• CSS 示例：.divider { text-align: center; position: relative; } + .divider::before { content: ""; position: absolute; top: 50%; left: 0; width: 40%; height: 1px; background: #ccc; } + .divider::after 同理向右
• 这样线长、间距、颜色、是否虚线都可独立控制，且无语义干扰
• 缺点是多一层 DOM，SEO 或无障碍若真需要语义化分隔，还是保留

  ---

  更稳妥

事情说清了就结束。真正麻烦的从来不是怎么居中，而是得判断：这根线要不要语义、要不要响应式缩放、会不会被后续组件的 margin 撑开、有没有设计稿要求两端留白固定值——这些细节一叠加，margin: auto 就只是起点。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！