CSS实现元素靠左对齐且不偏移居中文本（非绝对定位方案）

完全可以不使用position: absolute实现需求。原有代码的问题是按钮处于正常文档流中，会和标题同占行内空间，导致标题被挤偏，无法相对父容器居中。下面提供两个可直接落地的方案：

方案1：Flex 布局（兼容性最佳，支持IE10+） #

实现逻辑是将父容器拆分为三个逻辑块：左右两个块宽度完全一致，中间块放标题并设置内容居中，从根本上保证标题永远处于父容器正中心，不受左侧按钮宽度影响。

.text-center {
  display: flex;
  align-items: center; /* 控制子元素垂直居中，可按需调整 */
  padding: 0 12px; /* 可选，避免内容贴容器边缘 */
}
.side-col {
  flex: 1; /* 两侧列平分除标题外的所有宽度，永远等宽 */
}
.title {
  flex: 0 0 auto; /* 中间列宽度由标题内容决定，不拉伸收缩 */
}
/* 可选：长按钮文本省略样式，避免撑破布局 */
.side-col button {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

对应HTML结构：

<div class="text-center">
  <div class="side-col">
    <button>Logout</button>
  </div>
  <div class="title">Title</div>
  <div class="side-col"></div> <!-- 右侧空占位，和左侧列宽度自动保持一致 -->
</div>

如果后续需要在右侧添加其他操作按钮，直接把内容放入右侧的side-col容器即可，标题居中效果不会被破坏。

方案2：CSS Grid 布局（代码最简洁，现代浏览器全支持） #

通过网格预定义三列等比分配规则，不需要手动控制占位元素宽度，代码更精简：

.text-center {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* 三列：两侧等比分配宽度，中间列适配标题内容 */
  align-items: center;
  gap: 12px;
  padding: 0 12px;
}
.text-center button {
  justify-self: start; /* 按钮在所在列内靠左对齐，固定在容器左侧 */
  /* 可选：长按钮省略样式 */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.title {
  justify-self: center;
}

对应HTML结构（不需要额外占位标签）：

<div class="text-center">
  <button>Logout</button>
  <span class="title">Title</span>
</div>

两个方案均未使用绝对定位，所有元素保留在正常文档流中，不会出现按钮遮挡内容、父容器高度塌陷的问题，响应式适配成本更低。

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