写出你知道的CSS水平和垂直居中的方法

在前端开发中，有多种方法可以实现元素的水平和垂直居中。以下是一些常见的方法：

1. Flexbox 布局

Flexbox 是一个非常强大的布局模型，可以轻松实现水平和垂直居中。

.container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100vh; /* 可根据需要调整容器高度 */
}

2. Grid 布局

CSS Grid 也是一个强大的布局系统，同样可以实现水平和垂直居中。

.container {
    display: grid;
    place-items: center; /* 水平和垂直居中 */
    height: 100vh; /* 可根据需要调整容器高度 */
}

3. 绝对定位和转换

使用绝对定位和 CSS 的 transform 属性也可以实现水平和垂直居中。

.container {
    position: relative;
    height: 100vh; /* 可根据需要调整容器高度 */
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

4. 使用表格和表格单元格

虽然这种方法现在较少使用，但仍然是一种可行的居中方法。

.container {
    display: table;
    width: 100%; /* 可根据需要调整容器宽度 */
    height: 100vh; /* 可根据需要调整容器高度 */
}

.centered {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

5. 使用 line-height

对于单行文本，可以通过设置 line-height 与容器高度相等来实现垂直居中。

.container {
    height: 100px; /* 容器高度 */
    text-align: center; /* 水平居中 */
}

.centered {
    line-height: 100px; /* 与容器高度相等 */
}

请注意，这种方法仅适用于单行文本。对于多行文本或块级元素，这种方法可能不适用。

以上就是一些常见的 CSS 水平和垂直居中的方法。在实际开发中，可以根据具体需求和场景选择合适的方法。