如何基于Div中心实现justify-content: space-between的特殊对齐效果？

要实现你描述的布局（三元素时中间元素中心与容器中心重合，四元素时容器中心位于第二、三元素中间），可以使用CSS Grid或Flex布局的原生特性来完成，无需额外计算或JavaScript。

方案一：CSS Grid（推荐，更直观） #

Grid布局天生适合这种需要精确对齐的场景，通过grid-template-columns分配空间，直接实现中心对齐要求。

三元素场景代码 #

.flex {
  display: grid;
  width: 1000px;
  height: 200px;
  background-color: black;
  position: relative;
  /* 左右用1fr平分容器剩余空间，中间列自适应元素宽度 */
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
}

.first {
  width: 150px;
  background-color: red;
  justify-self: start; /* 靠左对齐 */
}

.second {
  width: 200px;
  background-color: green;
  /* 自动居中，列的位置正好让元素中心与容器中心重合 */
}

.third {
  width: 100px;
  background-color: blue;
  justify-self: end; /* 靠右对齐 */
}

.center {
  width: 10px;
  height: 10px;
  background-color: white;
  position: absolute;
  top: calc(50% - 5px);
  left: calc(50% - 5px);
}

<div class="flex">
  <div class="center"></div>
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</div>

这个设置中，左右的1fr会自动平分容器减去中间元素宽度后的剩余空间，中间元素的起始位置正好是容器中心减去自身宽度的一半，因此元素中心会完美对齐容器中心。

四元素场景代码 #

对于四个元素，只需调整grid-template-columns为1fr auto auto 1fr，让第二、三元素占据中间两列，它们的中心中点会自动与容器中心重合：

.flex {
  display: grid;
  width: 1000px;
  height: 200px;
  background-color: black;
  position: relative;
  grid-template-columns: 1fr auto auto 1fr;
  align-items: stretch;
  gap: 0; /* 可根据需求调整元素间距 */
}

.first {
  width: 150px;
  background-color: red;
  justify-self: start;
}

.second {
  width: 200px;
  background-color: green;
}

.third {
  width: 100px;
  background-color: blue;
}

.fourth {
  width: 120px;
  background-color: yellow;
  justify-self: end;
}

.center {
  width: 10px;
  height: 10px;
  background-color: white;
  position: absolute;
  top: calc(50% - 5px);
  left: calc(50% - 5px);
}

<div class="flex">
  <div class="center"></div>
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
  <div class="fourth"></div>
</div>

方案二：Flex布局（利用自动margin） #

如果更倾向于使用Flex，可以通过自动margin分配剩余空间，配合元素的居中调整：

三元素场景代码 #

.flex {
  display: flex;
  width: 1000px;
  height: 200px;
  background-color: black;
  position: relative;
  align-items: stretch;
}

.first {
  width: 150px;
  background-color: red;
}

.second {
  width: 200px;
  background-color: green;
  /* 自动左右margin让元素居中 */
  margin: 0 auto;
}

.third {
  width: 100px;
  background-color: blue;
  /* 强制元素靠右 */
  margin-left: auto;
}

.center {
  width: 10px;
  height: 10px;
  background-color: white;
  position: absolute;
  top: calc(50% - 5px);
  left: calc(50% - 5px);
}

这里margin:0 auto让中间元素自动居中，margin-left:auto让第三个元素贴紧容器右侧，同时第一个元素默认贴紧左侧，实现需求布局。

四元素场景代码 #

将第二、三元素包裹在一个子Flex容器中，让子容器居中，即可保证它们的中间点与容器中心对齐：

.flex {
  display: flex;
  width: 1000px;
  height: 200px;
  background-color: black;
  position: relative;
  align-items: stretch;
}

.first {
  width: 150px;
  background-color: red;
  margin-right: auto;
}

.middle-wrapper {
  display: flex;
}

.second {
  width: 200px;
  background-color: green;
}

.third {
  width: 100px;
  background-color: blue;
}

.fourth {
  width: 120px;
  background-color: yellow;
  margin-left: auto;
}

.center {
  width: 10px;
  height: 10px;
  background-color: white;
  position: absolute;
  top: calc(50% - 5px);
  left: calc(50% - 5px);
}

<div class="flex">
  <div class="center"></div>
  <div class="first"></div>
  <div class="middle-wrapper">
    <div class="second"></div>
    <div class="third"></div>
  </div>
  <div class="fourth"></div>
</div>

以上两种方案都是纯原生CSS实现，不需要依赖任何外部工具或脚本，且能完美满足你描述的对齐需求。

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