React导航栏Icon元素响应式居中问题：如何实现自适应居中？

我的导航栏布局结构为：左侧分类导航、中间Icon、右侧控制区。尝试过以下方法但都存在问题：

• 添加右侧margin无法实现响应式效果
• 绝对定位只能让Icon相对于屏幕居中，无法适配左右两侧的内容宽度
• 使用Grid布局在大屏下可以居中，但屏幕缩小时Icon不再居中

原始React组件代码 #

import React, { Component } from "react";
import "../styles/Navbar.css";

const categories = ["category1", "category2", "category3"];

export default class Navbar extends Component {
  render() {
    return (
      <nav className="navbar">
        <div className="side nav">
          <ul>
            {categories.map((c) => (
              <li>{c}</li>
            ))}
          </ul>
        </div>
        <div className="icon">Icon</div>
        <div className="side controls">Controls</div>
      </nav>
    );
  }
}

原始CSS代码 #

.navbar {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
}

.navbar ul {
  list-style-type: none;
  display: flex;
  gap: 12px;
  font-size: 16px;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
}

尝试过的Grid方案（小屏失效） #

.navbar {
  height: 80px;
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  column-gap: 10px;
  align-items: center;
  padding: 0 5%;
}

.navbar .controls {
  display: flex;
  justify-content: end;
}

.navbar ul {
  list-style-type: none;
  display: flex;
  gap: 12px;
  font-size: 16px;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
}

解决方案一：Flex + 等宽占位容器 #

核心是让左右两侧的占位容器宽度完全一致，确保中间Icon始终处于导航栏正中间，适配所有屏幕尺寸。

修改后的React代码 #

import React, { Component } from "react";
import "../styles/Navbar.css";

const categories = ["category1", "category2", "category3"];

export default class Navbar extends Component {
  render() {
    return (
      <nav className="navbar">
        <div className="nav-wrapper">
          <div className="side nav">
            <ul>
              {categories.map((c) => (
                <li>{c}</li>
              ))}
            </ul>
          </div>
        </div>
        <div className="icon">Icon</div>
        <div className="controls-wrapper">
          <div className="side controls">Controls</div>
        </div>
      </nav>
    );
  }
}

修改后的CSS代码 #

.navbar {
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 5%;
}

/* 左右占位容器设置为flex:1，强制宽度相等 */
.nav-wrapper, .controls-wrapper {
  flex: 1;
}

/* 左侧导航左对齐，右侧控制区右对齐 */
.side.nav {
  text-align: left;
}
.side.controls {
  text-align: right;
}

.navbar ul {
  list-style-type: none;
  display: flex;
  gap: 12px;
  font-size: 16px;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
  /* 小屏时自动换行避免溢出 */
  flex-wrap: wrap;
  gap: 8px;
}

解决方案二：优化Grid布局 #

调整Grid列配置，解决小屏居中失效问题，同时添加溢出处理保证布局稳定。

优化后的CSS代码 #

.navbar {
  height: 80px;
  display: grid;
  /* 使用auto代替1fr，让左右列根据内容自适应，但保持对称 */
  grid-template-columns: auto max-content auto;
  align-items: center;
  padding: 0 5%;
  gap: 10px;
}

/* 控制左右内容的对齐方式 */
.navbar .nav {
  justify-self: start;
}
.navbar .controls {
  justify-self: end;
}

.navbar ul {
  list-style-type: none;
  display: flex;
  gap: 12px;
  font-size: 16px;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  gap: 8px;
}

/* 避免内容溢出破坏布局 */
.side {
  overflow: hidden;
  min-width: 0;
}

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