文字水平垂直居中

方法一：Flexbox（推荐）

使用Flexbox是最简单和现代的方法，只需在父容器上设置display: flex，并使用align-items和justify-content属性。

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
}

方法二：CSS Grid

CSS Grid布局同样可以轻松实现居中效果，设置display: grid并使用place-items: center。

.container {
    display: grid;
    place-items: center;
    height: 120px;
}

方法三：绝对定位 + Transform

对于需要绝对定位的元素，可以使用position: absolute配合transform: translate(-50%, -50%)实现居中。

.container {
    position: relative;
    height: 120px;
}
.text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

方法四：表格单元格（旧方法）

将容器设为display: table-cell，使用vertical-align: middle和text-align: center实现居中，兼容性好但不够灵活。

.container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 120px;
}