如何在右侧存在元素时实现元素水平居中？

当然可以不脱离文档流实现这个需求，以下是两个简洁且适配响应式的方案：

方案一：Grid 布局（推荐，最简洁） #

利用 Grid 的列分配特性，让左右两侧自动平分剩余空间，中间列放置输入框，自然实现居中：

HTML 结构示例 #

<header class="header">
  <div class="search-wrapper">
    <input type="text" class="search-input" placeholder="搜索城市">
  </div>
  <div class="header-right">
    <!-- 右侧元素内容，比如单位切换按钮 -->
  </div>
</header>

CSS 代码 #

.header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
}

.search-wrapper {
  grid-column: 2; /* 固定在中间列 */
  width: 100%;
  max-width: 400px; /* 限制输入框最大宽度，避免拉伸过宽 */
}

.search-input {
  width: 100%;
  padding: 0.5rem;
  box-sizing: border-box;
}

.header-right {
  grid-column: 3;
  justify-self: end; /* 让右侧元素靠右对齐 */
}

/* 小屏幕响应式适配 */
@media (max-width: 600px) {
  .header {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .header-right {
    grid-column: 1;
    justify-self: center;
    margin-top: 0.5rem;
  }
}

方案二：Flexbox 对称占位法 #

通过左侧添加与右侧元素宽度一致的占位容器，让输入框在剩余空间中自动居中：

HTML 结构示例 #

<header class="header">
  <div class="left-placeholder"></div>
  <div class="search-wrapper">
    <input type="text" class="search-input" placeholder="搜索城市">
  </div>
  <div class="header-right">
    <!-- 右侧元素内容 -->
  </div>
</header>

CSS 代码 #

.header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
}

/* 用 CSS 变量同步左右宽度，避免硬编码 */
:root {
  --right-element-width: 80px;
}

.left-placeholder {
  width: var(--right-element-width);
}

.search-wrapper {
  flex: 1;
  max-width: 400px;
  margin: 0 auto; /* 让输入框在剩余空间内居中 */
}

.search-input {
  width: 100%;
  padding: 0.5rem;
  box-sizing: border-box;
}

.header-right {
  width: var(--right-element-width);
  text-align: right;
}

/* 小屏幕响应式适配 */
@media (max-width: 600px) {
  .header {
    flex-direction: column;
  }
  .left-placeholder {
    display: none;
  }
  .header-right {
    width: auto;
    text-align: center;
    margin-top: 0.5rem;
  }
}

这两种方案都不会让元素脱离文档流，同时能保证输入框始终居中，小屏幕下自动切换为垂直布局，避免元素重叠，无需复杂的媒体查询逻辑。

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