盒子上下左右居中 至少 3 种

在网页布局中，让盒子元素在页面上水平和垂直方向都居中，有多种方法可以实现，这里提供三种常见的技术：

1. **Flexbox** (弹性盒模型)：对于现代浏览器支持，可以使用CSS的`display: flex;`属性。设置容器的`justify-content: center;` 和 `align-items: center;` 来实现元素在主轴（通常是行或列）上的居中。

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

2. **Grid Layout** (网格布局)：同样也是现代浏览器的特性，如果需要创建复杂的网格结构，可以使用`grid-template-columns`和`grid-template-rows`以及`place-items` 属性来居中元素。

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

3. **Positioning and Padding**：通过定位元素然后设置内边距（padding），配合绝对定位(`position: absolute;`)或相对定位(`position: relative;`)来达到居中效果。

.parent {
  position: relative;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 或者 */
  margin-top: calc(50% - height / 2);
  margin-left: calc(50% - width / 2);
}