css 元素居中

/* CSS 元素居中示例 */

/* 方法1: 使用 Flexbox 居中 */
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100vh;           /* 设置容器高度为视口高度 */
}

/* 方法2: 使用 Grid 居中 */
.container {
  display: grid;
  place-items: center;     /* 同时水平和垂直居中 */
  height: 100vh;           /* 设置容器高度为视口高度 */
}

/* 方法3: 使用绝对定位和 transform 居中 */
.centered-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 移动元素自身宽度和高度的一半 */
}

解释说明：

1. Flexbox 居中：通过 display: flex 和 justify-content: center、align-items: center，可以轻松实现子元素的水平和垂直居中。适用于单行或多行内容。

2. Grid 居中：使用 display: grid 和 place-items: center 可以快速将子元素居中对齐。适合简单的布局需求。

3. 绝对定位和 transform 居中：通过设置 position: absolute 和 transform: translate(-50%, -50%)，可以让元素相对于其父元素的中心点进行居中。这种方法适用于固定大小的元素。