[分享]css中如何让hr居中

在CSS中，我们可以通过以下几种方式来让水平线（hr）居中。 方法一：使用margin和textalign属性 我们可以使用margin属性和textalign属性来让hr居中。 首先，在CSS中添加...

在CSS中，我们可以通过以下几种方式来让水平线（hr）居中。 方法一：使用margin和text-align属性 我们可以使用margin属性和text-align属性来让hr居中。 首先，在CSS中添加以下代码： pre{ font-size: 14px; color: #333; background: #f8f8f8; padding: 10px; border-radius: 5px; } p{ line-height: 1.4; margin-bottom: 20px; } hr{ display: block; margin: 0 auto; border: none; border-top: 2px solid #ccc; text-align: center; } 然后，在HTML中添加以下代码：

这是一段文字

---

这是另一段文字

这样就可以让水平线在页面中水平居中。 方法二：使用flexbox 在CSS中，我们也可以使用flexbox来让hr居中。首先，在CSS中添加以下代码： pre{ font-size: 14px; color: #333; background: #f8f8f8; padding: 10px; border-radius: 5px; } p{ line-height: 1.4; margin-bottom: 20px; } hr{ display: flex; justify-content: center; align-items: center; border: none; border-top: 2px solid #ccc; } 然后，在HTML中添加以下代码：

这是一段文字

---

这是另一段文字

这样也可以让水平线在页面中水平居中。 总结 以上就是CSS中让水平线居中的两种方法，可以根据自己的需求选择适合自己的方式。