html - CSS:使用中心元素作为引用将元素对齐到中心

Question

<分区>

Answer 1

我不确定为什么有人会跳到认为这是不可能的 - Flexbox 非常适合这种类型的东西。让我知道这是否是您想要的...

为了解释 - 我在 Flexbox 行中创建了三个容器，其中的元素在中间对齐。中间的容器关闭了 flex，因此它位于中间的适当宽度处。左边和右边的容器是灵活的，可以增长以填充其余空间，从而形成对称。然后，您只需将左侧容器中的元素向右对齐即可。

.f-row {
  display: flex;
  flex: 1 1 0;
  border: 1px black solid;
}

.f-row.no-flex {
  flex: none;
}

.f-row.center {
  align-items: center;
}

.f-row.right {
  justify-content: flex-end;
}

.box {
  height: 25px;
  width: 50px;
}

.blue {
  background: blue;
}
.red {
  background: red;
}
.yellow {
  background: yellow;
}
.pink {
  background: pink;
}
.purple {
  background: purple;
}

<div class="f-row center">
  <div class="f-row right">
    <div class="box blue"></div>
    <div class="box red"></div>
    <div class="box yellow"></div>
  </div>
  <div class="f-row no-flex">
    <h1>LOGO</h1>
  </div>
  <div class="f-row">
    <div class="box pink"></div>
    <div class="box purple"></div>
  </div>
</div>