css文字上下居中代码 |css3切换页面特效

/*方法一：通过line-height实现*/
.center {
line-height: 200px; /*与高度相同的行高*/
height: 200px;
text-align: center;
}
/*方法二：通过position实现*/
.container {
position: relative;
height: 200px;
}
.text {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/*方法三：通过display:flex实现*/
.container {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
}

以上三种方法都可以实现文字上下居中，您可以根据实际需求选择其中一种。需要说明的是，对于方法二和方法三来说，容器一定要设置固定高度。