如何用CSS实现左侧固定元素、其余元素页面居中且不重叠（无JS/硬编码@media）

完全可以做到，以下是纯CSS的实现方式，无需JS或硬编码尺寸的媒体查询：

核心思路 #

利用 flexbox 结合 min-width: fit-content 实现自适应布局，通过 flex-shrink: 0 保证左侧元素不被压缩，再借助自动外边距让其余元素整体居中。

代码示例 #

<div class="page-wrapper">
  <div class="left-element">左侧元素</div>
  <div class="centered-content">
    <p>需要居中的内容块</p>
    <p>更多居中内容...</p>
  </div>
</div>

/* 空间不足时显示横向滚动条，避免内容截断 */
body {
  overflow-x: auto;
  margin: 0;
}

.page-wrapper {
  display: flex;
  width: 100%;
  /* 容器最小宽度为内容总宽度，防止元素重叠 */
  min-width: fit-content;
  gap: 1rem; /* 可选：给左右元素添加间距 */
}

.left-element {
  /* 禁止左侧元素被压缩，始终紧贴页面左侧 */
  flex-shrink: 0;
  padding: 1rem;
  background: #eee;
}

.centered-content {
  /* 让内容块相对于页面整体居中 */
  margin: 0 auto;
  padding: 1rem;
  background: #ddd;
  /* 可选：限制居中内容最大宽度，避免过宽 */
  max-width: 600px;
}

效果说明 #

1. 视口宽度充足时，.left-element 紧贴页面左侧，.centered-content 整体处于页面中线位置；
2. 视口宽度小于「左侧元素宽度 + 居中内容宽度」时，页面出现横向滚动条，.centered-content 被挤向右侧，不会与左侧元素重叠；
3. 所有尺寸自适应，无需硬编码元素宽度或媒体查询断点。

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