如何在不重叠左侧固定侧边栏的前提下尽可能居中元素？

你遇到的重叠问题，根源是给侧边栏设置position: absolute后，它脱离了flex布局的文档流，容器section不会为它预留空间，导致居中的main元素直接覆盖在侧边栏上。以下是满足你需求的两种实现方案：

方案一：基于Flex布局（保留侧边栏绝对定位） #

这种方案通过给容器预留空间，让main自动适配不同宽度的显示需求：

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
}

section {
  width: 100%;
  height: 100%;
  display: flex;
  /* 为左侧绝对定位的侧边栏预留固定宽度的空间 */
  padding-left: 160px;
}

side {
  width: 160px;
  height: 160px;
  background-color: salmon;
  position: absolute;
  left: 0;
  top: 0;
}

main {
  background-color: steelblue;
  height: 100%;
  max-width: 240px;
  /* 允许收缩，基准宽度设为240px */
  flex: 0 1 240px;
  /* 空间充足时自动居中，不足时自动靠左避免重叠 */
  margin: 0 auto;
  /* 确保元素能收缩到最小，防止内容溢出 */
  min-width: 0;
}

关键修改说明 #

• 给section添加padding-left: 160px，为绝对定位的侧边栏预留空间，从根源上避免main向左偏移重叠。
• main的margin: 0 auto在空间充足（总宽度 - 160px ≥ 240px）时自动居中；当空间不足时，自动外边距失效，main会在预留的右侧空间内左对齐，同时根据flex: 0 1 240px自动收缩宽度。

方案二：基于动态外边距计算（精准全局居中） #

如果需要main在空间充足时严格相对于整个页面居中，而非侧边栏右侧的空间，可使用CSS的max()和calc()函数动态计算外边距：

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
}

section {
  width: 100%;
  height: 100%;
  position: relative;
}

side {
  width: 160px;
  height: 160px;
  background-color: salmon;
  position: absolute;
  left: 0;
  top: 0;
}

main {
  background-color: steelblue;
  height: 100%;
  max-width: 240px;
  min-width: 0;
  /* 动态左边距：取居中位置（50% - 120px）和侧边栏宽度的较大值，确保不重叠 */
  margin-left: max(160px, calc(50% - 120px));
  /* 自动收缩宽度，适配剩余可用空间 */
  width: min(240px, calc(100% - margin-left));
}

效果说明 #

• 当页面宽度≥560px时，calc(50% - 120px)大于160px，main保持全局居中，宽度固定为240px。
• 当页面宽度在400px~560px之间时，margin-left固定为160px，main靠在侧边栏右侧，宽度保持240px。
• 当页面宽度<400px时，main宽度自动收缩为页面宽度 - 160px，避免溢出和重叠。

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