如何让父容器内三个div中固定宽度的中间div水平居中？

实现方案 #

可通过CSS Grid或Flex布局实现需求，两种方案代码如下：

方案1：CSS Grid实现（更简洁）

.domain-container {
  display: grid;
  grid-template-columns: 1fr 400px 1fr;
  align-items: center;
  width: 100%;
  /* 可根据设计需要调整列间距，不需要可删除 */
  column-gap: 16px;
}

/* 小屏幕适配，可根据业务需求调整 */
@media (max-width: 400px) {
  .domain-container {
    grid-template-columns: 1fr;
    padding: 0 12px;
    row-gap: 8px;
  }
  .domain-input-parent {
    width: 100%;
  }
}

该方案天然满足所有需求：

• 中间domain-input-parent固定为400px宽度
• 左右domain-label和icon-container宽度自动相等，平分剩余空间
• 中间容器始终保持水平居中，适配所有宽度大于400px的屏幕

方案2：Flex布局实现

.domain-container {
  display: flex;
  align-items: center;
  width: 100%;
  /* 可根据设计需要调整列间距，不需要可删除 */
  gap: 16px;
}

.domain-label, .icon-container {
  flex: 1;
}

.domain-input-parent {
  flex: 0 0 400px;
}

/* 小屏幕适配，可根据业务需求调整 */
@media (max-width: 400px) {
  .domain-container {
    flex-direction: column;
    padding: 0 12px;
  }
  .domain-input-parent {
    width: 100%;
    flex: auto;
  }
  .domain-label, .icon-container {
    width: 100%;
  }
}

补充说明：如果左右容器内的内容较长，可添加overflow: hidden或word-break: break-all避免内容撑破容器宽度。

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