CSS水平居中是前端開發中常用的技巧之一。其中，使用百分比來實現水平居中是一種相對簡單而且靈活的方法。

在實現水平居中時，需要用到以下兩個CSS屬性：

display: inline-block;
text-align: center;

首先，我們需要將需要水平居中的元素的display屬性設置為inline-block，這樣才能實現水平居中的效果。

接下來，我們需要將元素的text-align屬性設置為center，這樣就能實現水平居中的效果。

具體實現代碼如下：

.center {
display: inline-block;
text-align: center;
margin-left: 50%;
transform: translateX(-50%);
}

在以上的代碼中，我們使用了margin-left和transform屬性幫助我們實現水平居中。

其中，margin-left: 50%是將元素相對于父元素的左側移動50%的寬度，而transform: translateX(-50%)是將元素相對于自身水平居中。

需要注意的是，以上的方法需要元素的寬度已知才能實現水平居中，如果元素的寬度未知，則需要使用其他的方法。

不過，在大部分情況下，使用百分比來實現水平居中是一個非常實用的技巧。