CSS是网页设计中不可或缺的一部分，它能够为网页添加各种各样的样式和效果。

常见的一种需求是将元素上下居中，下面我们来学习一下如何使用CSS实现这一效果。

/* 方法一：使用Flexbox实现上下居中 */
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
/* 方法二：使用table-cell实现上下居中 */
.container {
display: table-cell;
text-align: center; /* 水平居中 */
vertical-align: middle; /* 垂直居中 */
}
/* 方法三：使用绝对定位实现上下居中 */
.container {
position: relative;
}
.child {
position: absolute;
top: 50%; /* 相对于其父元素顶部位置为50% */
transform: translateY(-50%); /* 向上移动自身的一半高度 */
}

上面介绍了三种实现上下居中的方法，分别是使用Flexbox、table-cell和绝对定位。

学会了这些方法，你就可以轻松地实现元素的上下居中效果啦！