实现左侧元素左对齐，中间元素全屏居中的布局问题

你的核心问题是：Logo没有在整个页面宽度上居中，而是被左侧的返回按钮区域挤得向右偏移——当返回按钮右侧添加文字后，偏移会更明显。

问题根源 #

你当前用的Grid布局是grid-template-columns: auto 1fr auto，但只放了两个子元素：左侧的返回按钮和中间的Logo。第三列auto因为没有内容宽度为0，导致中间的1fr列实际是「返回按钮右侧到页面右边缘」的区域，Logo在这个区域内居中，自然会向右偏移。

解决方案 #

下面提供两种可靠的修复方式，按需选择：

方法一：绝对定位实现全局居中（简单高效）

给父容器设置相对定位，让Logo绝对定位在页面正中间，左侧按钮保持正常左对齐：

.header-checkout-flow {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
}

.header-checkout-flow .site-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* 确保Logo不被其他元素遮挡 */
  z-index: 1;
}

.header-checkout-flow .back-button {
  display: flex;
  align-items: center;
}

方法二：修正Grid布局（保留Grid特性）

让Grid的左右两列宽度匹配，中间列放Logo并居中，这样Logo就能在全局居中：

.header-checkout-flow {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

/* 让左侧按钮靠左对齐 */
.header-checkout-flow .back-button {
  justify-self: start;
  display: flex;
  align-items: center;
}

/* 让Logo在中间列居中 */
.header-checkout-flow .site-logo {
  justify-self: center;
}

修改后的完整代码示例（方法二） #

CSS

.header-checkout-flow {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.header-checkout-flow .back-button {
  justify-self: start;
  display: flex;
  align-items: center;
}

.header-checkout-flow .back-button .back-button-img {
  display: inline-flex;
  padding: 10px;
  align-items: center;
  gap: 16px;
  background: #000;
}

.header-checkout-flow .link-txt {
  color: red;
  font-family: Arial;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px;
  margin-left: 12px;
}

.header-checkout-flow .site-logo {
  justify-self: center;
}

HTML

<div class="header-checkout-flow">
  <div class="back-button">
    <a class="back-button-img" href="#">
      <img src="https://placehold.co/30x30" alt="返回图标" />
    </a>
    <p class="link-txt">返回网站</p>
  </div>
  <a href="#" rel="home" class="site-logo">
    <img src="https://placehold.co/100x80" alt="网站Logo" />
  </a>
  <!-- Grid第三列占位，自动匹配第一列宽度 -->
  <div></div>
</div>

内容的提问来源于stack exchange，提问作者Sébastien Gicquel