CSS相對定位是一種非常常用的定位方式，它允許將元素相對于它自身的位置進行定位，并且不會影響其他元素的布局。在這篇文章中，我們將主要講述如何使用CSS相對定位來實現水平居中的效果。

/* HTML代碼 */
<div class="container">
<div class="box"></div>
</div>
/* CSS代碼 */
.container {
position: relative;
}
.box {
position: relative;
left: 50%;
transform: translateX(-50%);
}

以上代碼實現了一個塊級元素水平居中的樣式，我們通過為容器元素設置相對定位，然后將子元素的左側位置設為50%，最后使用CSS3的transform屬性將元素左移其本身寬度的一半，從而實現了水平居中的效果。

需要注意的是，上述代碼只適用于塊級元素，如果需要將inline或inline-block元素水平居中，可以使用text-align屬性來實現。例如：

/* 針對單獨的行內元素設置水平居中 */
span {
display: inline-block;
text-align: center;
width: 100%;
}
/* 針對多個行內元素設置水平居中 */
.container {
text-align: center;
}
.box {
display: inline-block;
}

以上代碼通過給行內元素添加inline-block屬性，然后設置text-align屬性的值為center，就可以實現行內元素水平居中的效果。

總之，通過使用CSS相對定位以及text-align屬性，可以非常方便地實現元素的水平居中效果。