在HTML中，我們可以使用<hr>標簽來插入一個水平線，一般用于分隔內容。但是，<hr>標簽默認寬度為 100%，也就是說，它會跨越整個父容器寬度，這在一些情況下可能不太符合要求。那么，如何使用 CSS 讓<hr>標簽居中呢？

有兩種方式可以實現<hr>居中，一種是使用 margin，另一種是使用 flex 布局。

使用 margin：

hr {
margin: 0 auto;
}

在這個例子中，我們使用 margin 屬性將上下 margin 設置為 0，左右 margin 設置為 auto，即自動分配左右空白空間。這樣，<hr>就可以自動居中了。

使用 flex 布局：

.container {
display: flex;
align-items: center;
justify-content: center;
}
.container hr {
width: 50%;
}

在這個例子中，我們將<hr>標簽置于一個父容器內，并將父容器顯示屬性設置為 flex，使<hr>可以使用 flex 布局。接著，我們使用 align-items 屬性將垂直方向上的對齊方式設置為居中，justify-content 屬性將水平方向上的對齊方式設置為居中。最后，我們使用 hr 選擇器將<hr>標簽寬度設置為 50%，這樣就可以實現水平居中了。

以上就是兩種常見的<hr>居中方式。這些技巧不僅適用于<hr>標簽，也適用于其他元素的居中。