这是另一个依赖于flexbox来实现预期效果的实现。在左边仍然使用了一个“spacer”来确保空间被正确划分。它也不会换行，但我不确定当屏幕太小时你是否希望它换行，所以我就保持原样。

header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: baseline;
  width: 100%;
}

header>div {
  display: inline-block;
  width: 100%;
}

.search>form {
  display: flex;
}

.search>form>input {
  border-radius: 3px;
  flex: 1;
}

.buttons {
  display: flex;
  align-items: center;
}

.day-toggle {
  height: 24px;
  width: 24px
}

<header>
  <div class="spacer">
  </div>
  <div class="search">
    <form action="">
      <input class="location-search" type="text" />
    </form>
  </div>
  <div class="buttons">
    <button class="temp-format-toggle farenheit">C°</button>
    <span class="divider">&nbsp;|&nbsp;</span>
    <img class="day-toggle" id="day-toggle" src="https://cdn-icons-png.flaticon.com/512/3222/3222800.png" alt="Sun icon">
  </div>
</header>

把右边的元素也重复到左边，让它看不见，这会给予你你想要的平衡。

.d1 {
  display: flex;
  justify-content: center;
  gap: 1em;
}
.d1>*:first-child {
  visibility: hidden;
}
.d2 {
  text-align: center;
}

<div class="d1">
  <div>123456789</div>
  <div><input placeholder="enter something"></input></div>
  <div>123456789</div>
</div>
<div class="d2">|</div>