如何居中两个各有独立宽度的子div？含内容区与侧边栏场景

你需要调整父元素和子元素的层级样式，核心是让父元素占满窗口宽度，同时通过合适的容器设置实现两个子div的总宽度受限于max-width并居中。

方法一：添加中间容器（更易维护） #

HTML结构

<div class="learnings-main-content">
  <div class="content-wrapper">
    <div id="learnings-main-content-area1">左侧内容区域</div>
    <div id="learnings-main-content-area2">右侧内容区域</div>
  </div>
</div>

CSS代码

/* 父元素占满整个窗口宽度 */
.learnings-main-content {
  width: 100%;
  background-color: #ef972d;
  padding: 20px 0; /* 上下留内边距，左右不设置避免挤压居中区域 */
}

/* 中间容器：限制总宽度+水平居中 */
.content-wrapper {
  max-width: 1200px; /* 替换成你需要的最大总宽度 */
  width: 100%;
  margin: 0 auto; /* 实现水平居中 */
  display: flex; /* 让两个子div并排 */
  gap: 20px; /* 两个子div之间的间距，可选 */
  padding: 0 20px; /* 左右留白，避免内容贴边，可选 */
}

/* 两个子div平分宽度（可按需调整） */
#learnings-main-content-area1 {
  flex: 1;
  /* 可添加自定义样式，比如背景、内边距等 */
}

#learnings-main-content-area2 {
  flex: 1;
  /* 可添加自定义样式 */
}

方法二：不添加中间容器（简化结构） #

HTML结构

<div class="learnings-main-content">
  <div id="learnings-main-content-area1">左侧内容区域</div>
  <div id="learnings-main-content-area2">右侧内容区域</div>
</div>

CSS代码

/* 父元素占满窗口宽度，并用flex实现子元素居中 */
.learnings-main-content {
  width: 100%;
  background-color: #ef972d;
  padding: 20px;
  display: flex;
  justify-content: center;
}

/* 给两个子div的父容器设置总宽度限制 */
.learnings-main-content > div {
  max-width: 1200px; /* 替换成你需要的最大总宽度 */
  width: 100%;
  display: flex;
  gap: 20px; /* 子div间距，可选 */
}

#learnings-main-content-area1 {
  flex: 1;
}

#learnings-main-content-area2 {
  flex: 1;
}

关键说明 #

• 父元素设置width: 100%确保占满整个窗口宽度，背景色应用在父元素上才能覆盖全宽。
• max-width作用在包裹两个子div的容器上，控制它们的总宽度上限；margin: 0 auto（方法一）或父元素的justify-content: center（方法二）实现居中效果。
• 用flex:1让两个子div平分可用宽度，你也可以根据需求设置固定宽度，比如flex-basis: 60%和flex-basis: 40%。

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