如何使 hr 居中 - CSS

---

标签是用于在 HTML 页面中插入一条水平线。在某些情况下，你可能希望这条水平线居中显示。本文将介绍如何使用 CSS 居中

---

。

使用 text-align 属性

你可以使用 CSS 的 text-align 属性来实现水平居中。以下是使用该属性的示例代码：

hr {
  margin: 0 auto;
  text-align: center;
}

这将使浏览器将

---

元素视为一个块级元素，并将其宽度设置为父元素的宽度。text-align 属性使文本居中，同时将

---

居中。

使用 flexbox

你也可以使用 CSS 的 Flexbox 布局来居中

---

。以下是使用 Flexbox 布局的示例代码：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.parent hr {
  width: 50%;
}

这里，我们首先将父元素设置为 Flexbox 容器，并使用 justify-content 和 align-items 属性将所有内容（包括

---

）居中。然后，我们将

---

的宽度设置为 50%。

使用 Grid 布局

类似于 Flexbox，你也可以使用 CSS Grid 布局来居中

---

。以下是使用 Grid 布局的示例代码：

.parent {
  display: grid;
  place-items: center;
}

.parent hr {
  width: 50%;
}

同样，我们将父元素设置为 Grid 容器，使用 place-items 属性将所有内容（包括

---

）居中，并将

---

的宽度设置为 50%。

无论你选择哪种方法，你都可以将

---

元素居中显示。希望这篇文章能够对你有所帮助！