如何让盒子水中居中，并且不受浏览器的窗口大小影响

可以使用 CSS 的 `position: absolute` 和 `top: 50%` 、 `left: 50%` 、 `transform: translate(-50%, -50%)` 来实现盒子在水平和垂直方向上都居中，且不受浏览器窗口大小的影响。

示例代码:

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

说明：
- position: absolute 会让元素以绝对定位的方式布局，相对于最近的已定位祖先元素进行定位。
- top: 50% 和 left: 50% 会让元素的顶部和左边距离父元素顶部和左边的距离都为父元素高度和宽度的一半，也就是让元素居中。
- transform: translate(-50%, -50%) 会让元素在水平和垂直方向上各平移元素自身高度和宽度的一半，使元素完全居中