CSS3中的豎直居中是我們經常遇到的問題。下面讓我們來看一下如何實現CSS3中的豎直居中。 第一種方式是使用position和transform屬性。代碼如下：

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

這里我們通過將父元素設為相對定位，并將子元素設為絕對定位。子元素的top屬性設置為50%來使其垂直居中。接著使用transform屬性的translateY函數對子元素進行調整，以半高度的負值進行垂直居中。 第二種方式是使用flexbox布局。代碼如下：

.parent {
display: flex;
align-items: center;
justify-content: center;
}

我們將父元素設為flex布局，并使用align-items和justify-content等屬性實現子元素的垂直和水平居中。 第三種方式是使用CSS Grid布局。代碼如下：

.parent {
display: grid;
place-items: center;
}

我們使用CSS Grid布局將父元素設為網格布局。使用place-items屬性將子元素居中。 綜上所述，CSS3中的豎直居中可以通過使用position和transform屬性、flexbox布局以及CSS Grid布局來實現。無論哪種方式，都可以幫助我們輕松實現豎直居中效果。