Word文字居中与垂直居中

使用 Flexbox 是最简单且现代的居中方法，兼容性良好。

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px; /* 设置容器高度 */
}

只需在父容器上设置 display: flex，然后使用 align-items: center 和 justify-content: center 即可实现。

CSS Grid 布局同样可以轻松实现居中效果。

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

place-items: center 是 Grid 布局中实现居中的简写属性。

适用于需要绝对定位的场景，兼容性极佳。

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

先定位到 50%，再用 transform 反向移动自身宽高的 50%。

将元素显示为表格单元格，利用 vertical-align 属性。

.container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 200px;
    width: 100%;
}

这种方法在某些特定布局中非常有用。