如何实现中间div处于页面中心，左右div紧邻其两侧的布局？

这个问题很常见——当三个子div宽度不一致时，justify-content: center只会让父容器内的整个内容组在父容器里居中，而非让中间的.footer-company对齐页面的绝对中心。下面给你两种可靠的实现方式，都能满足你“中间div居中、左右div紧贴它且除padding外无空隙”的需求：

方案一：绝对定位 + 相对基准（最直观易控） #

这种方法通过把中间元素锚定在页面中心，再让左右元素以中间元素为基准定位，不管中间元素宽度怎么变，都能保持居中状态。

HTML结构 #

<div class="container-footer-3">
  <div class="footer-left">Left Text</div>
  <div class="footer-company">Center</div>
  <div class="footer-right">Right Longer Content</div>
</div>

CSS代码 #

/* 父容器设置相对定位，作为绝对定位子元素的基准 */
.container-footer-3 {
  position: relative;
  min-height: 60px; /* 防止父容器塌陷，根据子元素高度调整 */
  width: 100%;
}

/* 中间元素：精准对齐页面中心 */
.footer-company {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 让元素自身的中心对齐页面中心，不受宽度影响 */
  position: relative; /* 让左右元素以它为定位基准 */
  /* 可选：给中间元素加样式 */
  padding: 8px 16px;
  background: #f0f0f0;
}

/* 左侧元素：紧贴中间元素左侧 */
.footer-left {
  position: absolute;
  right: 100%; /* 相对于中间元素的右侧（也就是中间元素的左边缘）定位 */
  top: 50%;
  transform: translateY(-50%); /* 垂直居中对齐中间元素 */
  padding-right: 12px; /* 你允许的padding间隙，去掉就是完全紧贴 */
}

/* 右侧元素：紧贴中间元素右侧 */
.footer-right {
  position: absolute;
  left: 100%; /* 相对于中间元素的左侧（也就是中间元素的右边缘）定位 */
  top: 50%;
  transform: translateY(-50%); /* 垂直居中对齐中间元素 */
  padding-left: 12px; /* 你允许的padding间隙，去掉就是完全紧贴 */
}

方案二：CSS Grid 布局（现代简洁写法） #

如果你更喜欢用Grid这种现代布局方式，可以通过网格的定位特性实现同样效果，代码更简洁：

CSS代码 #

.container-footer-3 {
  width: 100vw; /* 占满视口宽度 */
  display: grid;
  place-items: center; /* 让网格项在单元格内居中 */
  grid-template-columns: auto fit-content(100%) auto; /* 左右列自适应，中间列适配内容 */
  /* 关键：通过偏移网格容器，让中间列对齐页面中心 */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  min-height: 60px;
}

/* 可选：给中间元素加样式，设置左右间隙 */
.footer-company {
  margin: 0 12px; /* 用margin代替padding实现间隙，也可以用padding */
  padding: 8px 16px;
  background: #f0f0f0;
}

为什么这个方案可行？ #

grid-template-columns: auto fit-content(100%) auto 让左右列自动适配自身内容宽度，中间列刚好容纳自身内容；再通过left:50% + transform: translateX(-50%)让整个网格容器的中心对齐页面中心，从而让中间的.footer-company精准处于页面绝对中心，左右元素自然紧贴它的两侧。

两种方案都能完美实现你的需求，你可以根据自己的代码习惯选择~

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