使用CSS3的垂直居中方法能幫助我們輕松地將HTML元素垂直居中。以下是常見的垂直居中方法：

/* 方法1：子元素為單行文本或圖片時 */
.parent {
display: flex;
align-items: center;
}
/* 方法2：子元素為多行文本時 */
.parent {
display: flex;
align-items: center;
}
.child {
margin: auto;
}
/* 方法3：子元素為任何類型時 */
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

以上三種方法都能實現元素的垂直居中，但要根據實際情況選擇合適的方法。