html - 居中的DIV(恰好为900像素)，每侧各有div(不透明)，填充了页面的其余部分

我有一个中心DIV，它正好（不多或少）900像素。我希望它始终居中，并有两个填充div来填充每边的页面剩余部分。。。
为（使用z-index）下的内容提供突出显示的类型效果…（即使用filler div…来显示“SPOTLIGHT”内容的每一侧都有其他内容，但它不在“SPOTLIGHT”下）。
下面的代码不起作用…但是它让你感觉到我在做什么
CSS:

/* DIV I WANT TO BE CENTERED, SURROUNDED BY 50% OPACITY DIVS FILLING REST OF PAGE */
.shadercentered {
width:950px;
margin-left:auto;
margin-right:auto;
position:relative;
background-color:green;
height:73px;
float:left;
top:-28px
}

/* DIVS THAT FILL THE REST OF THE PAGE ON EACH SIDE OF 900px CENTERED DIV */
.shaderblindsleft {
background-color:black;
opacity:0.5;
width:fill;;
height:73px;
float:left;
position:relative;
top:-28px;
}
.shaderblindsright {
background-color:black;
opacity:0.5;
width:fill;;
height:73px;
float:right;
position:relative;
top:-44px;
}

HTML格式：

<div class="shaderdiv">
    <div class="shaderblindsleft">&nbsp;</div>
    <div class="shadercenter">&nbsp;</div>
    <div class="shaderblindsleft">&nbsp;</div>
</div>

最佳答案

通过控制shaderdiv中发生的事情，让它的子对象脱离流，使用position absolute，就可以得到它。
您将shadercenter放置在中间，并将其挂在左侧：50%，然后使用一半大小的负边距将其偏移到左侧。
对于周围环境，可以使用约束的功能来定义宽度。对于左侧，将其挂接到左侧：0（因为它是左侧），然后将其右侧定义为挂接shadercenter的位置。。。所以这是正确的：50%。然后，添加一半shadercenter大小的右边距，以便将其约束为更小。使用相同的技术“反转”正确的一个

<div class="shaderdiv">
    <div class="shaderblinds left">&nbsp;</div>
    <div class="shadercenter">&nbsp;</div>
    <div class="shaderblinds right">&nbsp;</div>
</div>​

.shaderdiv
{
  position: relative;
  width: 90%;
  height: 73px;
  border: 1px solid yellow; /* debug stuff */
  box-sizing: border-box; /* debug stuff */
}

.shaderdiv > div { opacity:0.5 }

.shadercenter
{
  position: absolute;
  left: 50%;
  margin-left: -125px; /* minus half size of width */
  width:250px; /* fixed width */
  height:100%;
  background:green;
}

.shaderblinds
{
  position: absolute;
  height: 100%;
}

.left
{
  left: 0;
  right:50%;
  margin-right: 125px; /* half size of width */
  background:red;
}

.right
{
  right: 0;
  left: 50%;
  margin-left: 125px; /* half size of width */
  background:blue;
}​

示例如下：http://jsfiddle.net/5kDjw/2/
您可以使用shaderdiv的大小来查看它是否完全是液态的，shadercenter始终是固定宽度的，始终居中，没有重叠