CSS垂直居中是网页设计中常用的一种技巧。在许多场合中需要将元素垂直居中，这时候可以使用CSS来实现。下面我来讲一下怎么用CSS来实现垂直居中。

.container{
height: 300px; /* 容器高度 */
display: flex; /* 将父级容器设置为flex布局 */
justify-content: center; /* 让子元素在容器水平居中 */
align-items: center; /* 让子元素在容器垂直居中 */
}

我们可以通过将容器设置为flex布局，然后使用justify-content和align-items属性来实现水平和垂直居中。当容器设置display属性值为flex后，容器内的子元素默认是垂直居中的。

另外还有一种方法是使用相对/绝对定位，如下代码所示：

.container{
position: relative; /* 设定父级容器为相对定位 */
height: 300px; /* 容器高度 */
}
.item{
position:absolute; /* 子元素设置为绝对定位 */
top:50%; /* 将子元素上移一半高度 */
transform: translateY(-50%); /* 再向上移动一半高度，即垂直居中 */
}

使用相对/绝对定位需要注意哪些元素需要设置为相对和绝对定位，以及元素的高度和宽度。但相对/绝对定位实现垂直居中的效果更加稳定，可以兼容更多浏览器。

综上所述，我们可以使用flex布局或相对/绝对定位来实现CSS垂直居中。在实际应用中可以根据具体情况选择合适的方法。