如何在CSS中实现元素的水平和垂直居中布局？

在 CSS 中实现元素的水平和垂直居中布局，有多种方法，具体取决于容器的布局模式以及元素自身是否可以设置宽度和高度：

1. **Flexbox** (弹性布局)：对于现代浏览器，flexbox 是最常用的选择。如果容器是 flex 容器，可以使用 `display: flex; justify-content: center; align-items: center;` 来使其内的项目在主轴（默认为横轴）和交叉轴（默认为纵轴）上都居中。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. **Grid** (网格布局)：类似地，如果你使用 CSS Grid，可以分别设置行和列的对齐方式：

.container {
  display: grid;
  place-items: center;
}

3. **Positioning** 和 `transform`：对于相对定位的元素，配合 `left: 50%; top: 50%` 设置初始位置，并通过负的外边距 (`margin-top` 或 `margin-left`) 向左上移动元素大小的一半，实现居中：

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

4. **表格单元格 (table cells)**：对于 `<table>` 标签中的单元格，可以设置 `cellspacing` 和 `cellpadding` 为零，然后用 `text-align` 和 `vertical-align` 属性调整文本：

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