CSS如何实现垂直居中同时水平居中？

在CSS中，实现一个元素既垂直又水平居中，有多种方法，取决于元素的布局模式和父容器的特点。以下是几种常见的方法：

1. **Flexbox**:
使用 `display: flex;` 属性，并配合 `align-items: center;` 和 `justify-content: center;`:

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

这里 `.parent` 是包含需要居中的元素的容器。

2. **Grid** (网格布局):
对于 Grid 容器，同样设置 `align-content: center;` 和 `justify-items: center;`:

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

3. **Positioning**:
使用绝对定位（`position: absolute;`），然后设置 `top`, `right`, `bottom`, `left` 为 `auto` 或者相对于父元素的百分比值：

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

这里 `.child` 是需要居中的元素。

4. **Table Layout**:
如果元素像表格单元格那样排列，可以使用 `display: table-cell;`:

   .parent {
     display: table;
     width: 100%;
     height: 100%;
   }
   .cell {
     display: table-cell;
     vertical-align: middle;
     text-align: center;
   }