使用Flexbox或Grid布局来实现居中。

使用Flexbox或Grid布局来实现居中非常直观且强大。下面是两种方法的简要说明：

### Flexbox (弹性盒子布局)
1. 给包含元素设置 `display: flex;` 或 `display: inline-flex;` 使其成为Flex容器。
2. 对于单个中心元素，将其设置为 `align-self: center;` 或者将整个容器设置为 `justify-content: center; align-items: center;` 来使所有项目垂直和水平居中。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.item-to-center {
  align-self: center; /* 或者 */
}

### Grid布局 (网格布局)
1. 将包含元素设置为 `display: grid;`。
2. 可以直接在行（`grid-row`）和列（`grid-column`）上使用 `place-items` 属性，或者分别设置 `justify-items` 和 `align-items` 来实现垂直和水平居中。

.container {
  display: grid;
  place-items: center; /* 或者 */
  justify-items: center;
  align-items: center;
}

这两种方法使得页面布局更灵活，特别是当需要响应式设计时，它们能够轻松应对各种屏幕尺寸。