CSS中水平和垂直居中的所有写法

水平居中：
 

在 CSS 中，你可以使用多种方法来水平居中元素。以下是几种常见的写法：

使用 margin: auto;：

.element {
    width: 200px; /* 设置元素的宽度 */
    margin: 0 auto; /* 左右外边距设置为 auto，使元素水平居中 */
}

使用 text-align: center;（适用于行内元素）：

.container {
    text-align: center; /* 设置容器的文本对齐方式为居中 */
}

.element {
    display: inline-block; /* 将元素设置为行内块级元素 */
}

使用 Flexbox：

.container {
    display: flex; /* 使用 Flex 布局 */
    justify-content: center; /* 水平居中 */
}

.element {
    /* 其它样式 */
}

使用 Grid：

.container {
    display: grid; /* 使用 Grid 布局 */
    place-items: center; /* 水平和垂直居中 */
}

.element {
    /* 其它样式 */
}

使用绝对定位和负边距（对于已知宽度的元素）：

.element {
    position: absolute; /* 使用绝对定位 */
    left: 50%; /* 元素左边缘位于父元素的水平中心 */
    transform: translateX(-50%); /* 使用负的左偏移来使元素水平居中 */
}

这些都是常见的方法，具体使用哪种方法取决于你的布局需求和个人偏好。

---

垂直居中：

垂直居中元素的方法与水平居中有些不同。以下是几种常见的写法：

使用 Flexbox：

.container {
    display: flex; /* 使用 Flex 布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    height: 100vh; /* 设置容器高度，这里假设容器占据整个视口高度 */
}

.element {
    /* 其它样式 */
}

使用 Grid：

.container {
    display: grid; /* 使用 Grid 布局 */
    place-items: center; /* 水平和垂直居中 */
    height: 100vh; /* 设置容器高度，这里假设容器占据整个视口高度 */
}

.element {
    /* 其它样式 */
}

使用绝对定位和负边距（对于已知高度的元素）：

.container {
    position: relative; /* 使用相对定位 */
    height: 300px; /* 设置容器高度 */
}

.element {
    position: absolute; /* 使用绝对定位 */
    top: 50%; /* 元素上边缘位于父元素的垂直中心 */
    transform: translateY(-50%); /* 使用负的上偏移来使元素垂直居中 */
}

这些方法中，Flexbox 和 Grid 是最常用的，并且它们可以同时实现水平和垂直居中。选择哪种方法取决于你的布局需求和个人偏好。