如何实现全屏居中加载器？调整代码使加载器居中显示

你的代码问题在于给容器设置了width: 100vw和height: 100vh，结合transform: translate(-50%, -50%)后，容器会被拉伸覆盖整个视口，而非呈现为居中的独立容器。根据需求提供两种修改方案：

方案一：让小尺寸的加载容器居中 #

如果你的需求是一个居中的加载弹窗/容器，修改代码如下：

.loader-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  width: 200px; /* 可自定义宽度 */
  height: 200px; /* 可自定义高度 */
  z-index: 9999999999;
  /* 可选：添加圆角、阴影优化视觉效果 */
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

方案二：全屏遮罩+内部加载元素居中 #

如果需要全屏白色遮罩，同时让内部的加载动画/内容居中，调整代码为：

.loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: white;
  z-index: 9999999999;
  /* 使用flex布局让内部元素自动居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

使用这种方式时，只需在.loader-container内部添加加载动画元素（如旋转圆圈），它就会自动处于页面正中间。

内容的提问来源于stack exchange，提问作者Zaeni Ahmad