CSS如何实现容器第二个子元素居中而非所有子元素整体居中

用CSS Grid三列布局可以无侵入满足所有需求，不需要JS计算、不需要绝对定位，原生CSS即可覆盖所有边界场景：

• 主内容区默认保持视觉居中
• 侧边栏切换显示时，容器剩余空间足够的情况下完全不会挤压偏移主内容位置
• 容器宽度不足时侧边栏始终可见，不会被挤出可视区域
• 可直接实现示例中侧边栏左间距30px、主内容区右间距50px的效果，而非整体居中的两侧等距

核心逻辑是把容器拆为「左弹性轨道-主内容轨道-右弹性轨道」三列，左右两个弹性轨道默认等分剩余空间，天然保证中间主内容轨道始终在容器正中心；侧边栏放在左弹性轨道中，设置靠右对齐贴住主内容左边缘即可。

代码调整 #

原有React结构不需要改动，只需要替换CSS中.wrapper的布局规则，补充两个子元素的网格定位属性即可：

.wrapper {
  background: black;
  display: grid;
  /* 定义三列结构：左右为等宽弹性轨道，中间为内容自适应轨道 */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 200px;
  width: 500px;
}

.sidebar {
  background: red;
  height: 100%;
  width: 20px;
  flex-shrink: 0;
  /* 指定侧边栏放在左弹性轨道 */
  grid-column: 1;
  /* 侧边栏在轨道内靠右对齐，贴紧主内容左边缘 */
  justify-self: end;
}

.main-content {
  background: blue;
  height: 100%;
  width: 400px;
  /* 指定主内容放在中间轨道，天然居中 */
  grid-column: 2;
}

效果匹配说明 #

对应给出的示例尺寸（容器宽500px、主内容宽400px、侧边栏宽20px）：

• 中间主内容轨道宽度为400px，左右弹性轨道各分得(500-400)/2 = 50px宽度
• 侧边栏在左弹性轨道内靠右放置，占20px宽度，轨道剩余30px即为侧边栏的左侧间距
• 右弹性轨道内无元素，完整50px即为主内容的右侧间距
• 完全符合预期的非等距居中效果

边界场景表现 #

• 侧边栏隐藏时：中间主内容仍保持正中心位置，不会出现偏移
• 容器宽度大于「主内容宽度+侧边栏宽度」时：主内容始终居中，侧边栏始终贴在主内容左侧，不会出现额外空隙
• 容器宽度小于「主内容宽度+侧边栏宽度」时：左右弹性轨道会自动收缩到0，布局自动切换为侧边栏贴左、主内容接在侧边栏右侧的模式，侧边栏不会被隐藏，满足不能使用绝对定位的要求

如果需要调整侧边栏和主内容之间的间距，直接给.sidebar添加margin-right属性即可，不会破坏主内容的居中逻辑。

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