在網頁設計中，<hr>標簽常用于插入一條橫線來分割不同的內容區域。通過CSS可以進一步控制這條橫線的位置和樣式。

首先，可以使用以下CSS樣式來改變橫線的位置：

hr{
margin-top:30px;
margin-bottom:30px;
}

上面的代碼將橫線與上方和下方的內容區域分別隔開了30像素。如果需要將橫線居中，可以使用如下樣式：

hr{
margin: 0 auto;
}

此時，橫線將水平居中在其容器中。

除了通過margin屬性改變橫線的位置，還可以使用border和padding屬性來控制橫線的樣式和位置。如下的代碼可以將橫線置于一個寬度為90%的容器中：

.container{
width:90%;
border-top:1px solid #999;
padding-top:30px;
padding-bottom:30px;
}

這里，border-top屬性定義了橫線的樣式，padding-top和padding-bottom屬性為容器的上下內邊距設置了30像素的距離。

在實際開發中，可以根據具體需要自行調整橫線的位置和樣式。通過CSS，可以輕松地實現各種不同的效果。