CSS百分比垂直居中是Web開發中常見的一個問題，尤其是在響應式設計中。在本篇文章中，我們將深入探討如何使用CSS百分比實現垂直居中。

首先，我們需要明確CSS百分比的工作原理。CSS百分比可以基于父元素的高度或寬度進行計算。

// 設置父元素高度為200px
.parent {
height: 200px;
}
// 子元素高度為父元素高度的50%
.child {
height: 50%;
}

從上面的示例可以看出，子元素的高度是相對于父元素的50%。為了實現垂直居中，我們需要將子元素的marginTop設置為父元素高度的一半減去子元素高度的一半。即：

.parent {
height: 200px;
display: flex; // 增加flex布局
justify-content: center; // 水平居中
align-items: center; // 垂直居中
}
.child {
height: 100px;
width: 100px;
}

在以上代碼中，我們從父元素的display屬性中增加了flex布局，justify-content屬性用于水平居中，align-items屬性用于垂直居中。因為我們使用了flex布局，所以子元素屬性不再需要marginTop。

總結一下，使用CSS百分比垂直居中可以通過設置父元素的高度和子元素的高度百分比，組合使用flex布局進行水平居中和垂直居中來實現。同時，還需要注意保證子元素高度不超過父元素高度。