HTML UI布局问题：隐藏部分div后剩余元素无法居中

要实现隐藏部分.stat元素后，剩余元素在.hud容器中自动居中，最简洁可靠的方式是使用Flex布局，具体步骤如下：

1. 修改父容器.hud的CSS #

给.hud设置Flex容器属性，让它能自动调整子元素的位置：

.hud {
  display: flex;
  justify-content: center; /* 水平方向居中 */
  align-items: center;     /* 垂直方向居中（按需添加） */
  gap: 12px;               /* 子元素间的间距（可选） */
  /* 保留你原有的宽度、高度等样式 */
}

2. 正确隐藏.stat元素 #

确保隐藏的.stat元素不会占据布局空间，必须使用display: none（如果用visibility: hidden或opacity: 0，元素仍会占位，导致布局无法调整）：

.stat.hidden {
  display: none;
}

示例代码 #

HTML #

<div class="hud">
  <div class="stat">HP</div>
  <div class="stat hidden">MP</div>
  <div class="stat">EXP</div>
  <div class="stat hidden">STAM</div>
</div>

CSS #

.hud {
  width: 100%;
  height: 120px;
  background-color: #222;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.stat {
  width: 90px;
  height: 90px;
  background-color: #444;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}

.stat.hidden {
  display: none;
}

关键说明 #

• Flex容器会自动识别可见的子元素，justify-content: center会让所有可见子元素的整体在容器水平居中，不管剩余元素数量多少。
• 如果之前给.hud设置过float、position: absolute等属性，需要移除或调整，避免和Flex布局冲突。
• 若需要垂直居中，必须给.hud设置明确的高度，否则align-items: center无法生效。

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