实现居中Div左侧填充颜色：两种非Flex方案是否合理？

你的两种方案分析 & 更优实现思路 #

先帮你拆解下现有的两个方案，再聊聊更稳妥的替代思路：

1. 大尺寸div+绝对定位方案

这个方案在早期前端缺乏更好布局手段时确实有人用，但不算推荐的可接受实践：

• 硬编码的9999px很不优雅，极端宽屏场景下可能触发横向滚动条；
• 绝对定位依赖父元素的position: relative，后续如果父布局调整，容易出现偏移问题，维护性较差。

2. display: table布局方案

这个方案其实是可接受的实践方式：

• table布局天然支持等高、自适应空间分配，兼容性极佳（甚至能覆盖IE8+）；
• 唯一的小瑕疵是语义层面的“滥用”——table标签原本是用来展示表格数据的，用来做布局有点偏离语义，但从功能和稳定性来说完全没问题，如果你的项目需要兼容旧浏览器，这个方案完全可以用。

更优的无Flexbox实现方案（推荐） #

方案一：伪元素实现（最简洁，无多余DOM）

利用父元素的伪元素来生成左侧蓝色背景，不需要额外嵌套div，语义更清晰：

body { margin: 0; padding: 0; }
.header { 
  width: 100%; 
  height: 60px; 
  position: fixed; 
  overflow: hidden; /* 隐藏伪元素超出部分 */
}
.center-part { 
  width: 500px; 
  margin: 0 auto; 
  height: inherit; 
  background-color: rgba(0,255,0,0.8); 
  position: relative;
}
/* 用伪元素生成左侧蓝色背景 */
.header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 50%; /* 覆盖从左到屏幕中间的区域 */
  margin-right: 250px; /* 往回拉center区域的一半宽度，刚好对齐center左边缘 */
  height: 100%;
  background-color: blue;
}

<div class="header" style="top: 0px">
  <div class="center-part"></div>
</div>

优点：无冗余DOM、布局稳定、兼容性好（IE8+支持伪元素），完全不会出现滚动条问题。

方案二：浮动+负margin实现

如果不想用伪元素，也可以用浮动配合负margin来实现：

body { margin: 0; padding: 0; }
.header { 
  width: 100%; 
  height: 60px; 
  position: fixed; 
  overflow: hidden; /* 清除浮动并隐藏超出部分 */
}
.blue-left {
  float: left;
  width: 50%;
  height: 100%;
  background-color: blue;
  margin-right: 250px; /* 往回拉center区域的一半宽度 */
}
.center-part { 
  width: 500px; 
  margin: 0 auto; 
  height: inherit; 
  background-color: rgba(0,255,0,0.8);
}

<div class="header" style="top: 0px">
  <div class="blue-left"></div>
  <div class="center-part"></div>
</div>

优点：兼容性同样优秀，逻辑也比较直观，适合习惯浮动布局的场景。

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