css 水平居中

/* 方法1：使用 margin 自动 */
.center-block {
    margin: 0 auto;
    width: 50%; /* 需要指定宽度 */
}

/* 方法2：使用 flexbox */
.center-flex {
    display: flex;
    justify-content: center;
}

/* 方法3：使用 text-align */
.center-text {
    text-align: center;
}

/* 方法4：使用 position 和 transform */
.center-absolute {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

解释说明：

1. margin: 0 auto;：适用于块级元素，通过设置左右 margin 为 auto，可以让元素水平居中。但需要指定宽度。
2. display: flex; justify-content: center;：使用 Flexbox 布局，父元素设置 display: flex 和 justify-content: center 可以让子元素水平居中。
3. text-align: center;：适用于行内元素或文本内容，将父元素的 text-align 设置为 center，可以使子元素居中。
4. position: absolute; left: 50%; transform: translateX(-50%);：使用绝对定位和 transform 属性，可以精确地将元素水平居中。