如何在可调整大小的div中居中nowrap文本？

嘿，我完全懂你遇到的这个困扰——带过渡动画的可折叠侧边栏里，用text-align: center时，容器尺寸变化会让文本跟着中心点跳来跳去，手动调内边距又太局限。给你几个更优雅的解决方案：

方案1：Flex布局（最推荐） #

Flex的居中逻辑是基于容器实时尺寸的，过渡动画期间会平滑调整文本位置，完全不会出现跳变：

/* 侧边栏项的样式 */
.sidebar-item {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 可选：垂直居中 */
  white-space: nowrap; /* 保持文本不换行，满足你的需求 */
  transition: all 0.3s ease; /* 和侧边栏的过渡动画时长同步 */
}

只需要把侧边栏内的文本容器改成Flex布局，就能自动适配侧边栏展开/折叠的宽度变化，文本会跟着平滑移动，不用手动计算任何数值。

方案2：绝对定位 + Transform #

这种方式的居中是基于文本自身的，不受容器中心点变化的影响，适合不想用Flex的场景：

.sidebar-item {
  position: relative;
  white-space: nowrap;
  height: 40px; /* 给容器一个固定高度，方便垂直居中 */
  transition: all 0.3s ease;
}

.sidebar-item-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* 同时水平+垂直居中 */
}

transform: translate(-50%, -50%)是把文本自身的中心对齐容器的中心，不管容器宽度怎么变，文本的相对位置都是稳定的，过渡时平滑无跳变。

方案3：CSS变量动态计算内边距 #

如果侧边栏展开/折叠的宽度是固定值，可以用CSS变量自动计算内边距，替代手动调整：

:root {
  --sidebar-expanded: 240px;
  --sidebar-collapsed: 60px;
  --text-width: 80px; /* 提前测量好文本的固定宽度 */
}

.sidebar {
  width: var(--sidebar-expanded);
  transition: width 0.3s ease;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed);
}

.sidebar-item {
  white-space: nowrap;
  padding-left: calc((var(--sidebar-expanded) - var(--text-width)) / 2);
  transition: padding-left 0.3s ease;
}

.sidebar.collapsed .sidebar-item {
  padding-left: calc((var(--sidebar-collapsed) - var(--text-width)) / 2);
}

这种方式精准控制内边距，过渡时padding会平滑变化，文本位置自然也不会跳，但需要提前知道文本的固定宽度，灵活性不如前两种方案。

以上三种方法都能解决你当前的问题，其中Flex布局是最省心的，代码简洁且适配性最强，建议优先尝试~

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