如何在不嵌套容器的情况下将文本居中于固定宽度div下方？

针对你遇到的ReactFlow场景下的排版需求，这里提供两种可行方案：

方案1：固定文本容器宽度与方块一致 #

适合希望文本在方块宽度范围内换行并居中的场景：

修改.label的CSS样式：

.label {
  width: 80px; /* 和方块的width保持完全一致 */
  text-align: center;
  margin-top: 0.5rem; /* 可选，添加方块与文本的间距 */
}

原理：让文本容器的宽度和方块完全匹配，再通过text-align: center实现内部文本居中，既保证方块的容器不会被文本撑宽，也能稳定实现居中效果。

方案2：利用transform实现自适应居中 #

如果希望文本可以超出方块宽度，但整体相对于方块中心对齐，用这种方法：

修改.label的CSS样式：

.label {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content; /* 让文本容器宽度自适应内容长度 */
  margin-top: 0.5rem; /* 可选，添加间距 */
}

原理：通过left: 50%将文本容器的左边缘定位到方块的水平中心，再用transform: translateX(-50%)将文本容器向左偏移自身宽度的一半，最终实现整体相对于方块居中。这种方式不管文本长度如何变化，都能稳定居中，且不会影响方块所在容器的宽度。

完整代码示例（以方案2为例） #

HTML：

<div class="block"></div>
<p class="label">This text is a bit long</p>

CSS：

body {
  padding: 5rem;
}
.block {
  background-color: blue;
  width: 80px;
  height: 80px;
}

.label {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  margin-top: 0.5rem;
}

内容的提问来源于stack exchange，提问作者sir-haver