Flexbox中相对定位Input元素导致中间DIV无法居中的问题

核心方案 #

调整导航栏的Flex布局逻辑，让中间元素独立占据剩余水平空间并实现文本居中，彻底摆脱左右元素宽度变化对其位置的干扰。

修改关键CSS代码 #

将nav的布局属性和中间元素的样式调整如下：

nav {
  height: var(--nav-height);
  z-index:13;
  background: green;
  padding: 0 10px;
  display: flex;
  /* 替换原justify-content: space-between */
  justify-content: flex-start;
  align-items: center;
  gap:10px;
  z-index: 20;
  position: relative;
}

/* 给中间的MIDDLE元素添加以下样式 */
nav > div:nth-child(2) {
  flex: 1;
  text-align: center;
}

方案解释 #

• 原justify-content: space-between会让三个子元素按左、中、右分布，中间元素的位置依赖于左右元素的宽度总和，当右侧搜索框宽度从0%扩展到100%时，中间元素的位置会被挤压偏移。
• 修改为justify-content: flex-start后，左元素靠左排列，中间元素设置flex:1会占据左、右元素之外的所有剩余水平空间，再通过text-align: center让内部文本始终保持页面水平居中，完全不受右侧搜索框宽度变化的影响。

修改后的完整代码 #

HTML（无需改动）

<div class="body">
  <nav>    
    <div class="container bm-btn">
      LEFT
    </div>      
    <div>MIDDLE!!</div>
    
    <div>
      <form class="searchbox bg-search">
          <input type="search" placeholder="Search......" name="search" class="searchbox-input" onkeyup="buttonUp(this);" required>
          <input type="submit" class="searchbox-submit" value="GO">
          <span class="searchbox-icon">S</span>
      </form>      
    </div>
  </nav>
</div>

CSS

* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}
:root {
  --nav-height: 50px;
}
nav {
  height: var(--nav-height);
  z-index:13;
  background: green;
  padding: 0 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap:10px;
  z-index: 20;
  position: relative;
}

/* 新增中间元素样式 */
nav > div:nth-child(2) {
  flex: 1;
  text-align: center;
}

.body {
  background: gray;
  position: relative;
  display: flex;
  flex-direction: column;
  height:100vh;
}

.searchbox {
  position:relative;
  min-width:50px;
  width:0%;
  height:50px;
  float:right;
  overflow:hidden;    
  transition: width 0.3s;
}

.searchbox-input {
  position: relative;
  top:0;
  right:0;
  border:0;
  outline:0;
  background:#dcddd8;
  width:100%;
  height:50px;
  margin:0;
  padding:0px 55px 0px 20px;
  font-size:20px;
  color: #000;
}
.searchbox-input::-webkit-input-placeholder {
  color: #000;
  opacity:0.8;
}
.searchbox-input:-moz-placeholder {
  color: #000;
  opacity:0.8;
}
.searchbox-input::-moz-placeholder {
  color: #000;
  opacity:0.8;
}
.searchbox-input:-ms-input-placeholder {
  color: #000;
  opacity:0.8;
}
.searchbox-open{
  width:100%;
}

.searchbox-icon,
.searchbox-submit {
  width: var(--nav-height);
  height: var(--nav-height);
  display:block;
  position:absolute;
  top:0;
  font-family:verdana;
  font-size:22px;
  right:0;
  padding:0;
  margin:0;
  border:0;
  outline:0;
  line-height:50px;
  text-align:center;
  cursor:pointer;
  color:#dcddd8;
  background:#172b3c;
}

JavaScript（无需改动）

const btnS = document.querySelector('.bg-search');  
let isOpen = false;
btnS.addEventListener('click', (e) => {  
  const searchBox = document.querySelector('.searchbox');
  const inputBox = document.querySelector('.searchbox-input');

  console.log(e.target, isOpen)
  if (isOpen === false) {
    searchBox.classList.add('searchbox-open');
    inputBox.focus();    
    isOpen = true;    
  } else {   
    console.log('close input')
    searchBox.classList.remove('searchbox-open');
    inputBox.dispatchEvent(new Event('focusout'));
    isOpen = false;
  }
});

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