两个div等距离形成另一个div上方的中心

Question

我需要有两个div，图像与页面中心等距离，一个在左边，另一个在右边，在中央div上方。

我试图在下图中做一个例子：

主页div（花）是1024像素，两个右/左蓝色div需要保持在同一位置... 我不是那个CSS专家......我怎么能实现这个行为？

到目前为止我的CSS代码：

.overlay-left{
background-color: transparent !important;
 background-image: url("/images/background-left.png");
 background-position: center top;
  background-repeat: no-repeat;
   height: 100vw;
position: absolute;
    width: 400px;
    //left: calc(-60vw + 50%);
    left: calc(-50% + 600px);
margin-left: -150px;
  z-index: 100;
}


.overlay-right{
background-color: transparent !important;
 background-image: url("/images/background-right.png");
 background-position: center top;
  background-repeat: no-repeat;
   height: 100vw;
position: absolute;
    width: 400px;
    //left: calc(+130vw - 50%);
    left: 1024px;
margin-left: 100px;
  z-index: 100;
}

Answer 1

您需要为您的图片（此处为#parent）定义父级，并将图片和其他两个div [s]定义在该父级内。

您可以这样做：

#parent{
 position:relative;
  
  }

#parent img{
max-width:94%;
  display:block;
  margin:auto;
  
}

#parent> div{
width:50px;
  height:300px;
  background:rgba(125,125,255,0.5);
  position:absolute;
  top:0;
  bottom:0;
  margin:auto;
 
}
#right{
 right:0; 
}

#left{
left:0;
}

<div id="parent">
  <img src="http://www.planwallpaper.com/static/images/744081-background-wallpaper.jpg"/>  
  <div id="right"></div>
  <div id="left"></div>
</div>

Answer 2

我认为我使用Calc管理了这个问题。 我需要计算页面宽度的一半，然后减去或添加固定数量的像素。 我在没有运气的情况下使用Left with Calc，直到我找到了这个：

How to set the 'left' property of my div using css3 calc?

所以基本上我需要使用webkit-calc，moz-cal而不是简单的＆＃34; calc＆＃34;

现在这是一个工作CSS的片段：

.overlay-left{
background-color: transparent !important;
background-image: url("/images/background-left.png");
background-position: center top;
background-repeat: no-repeat;
height: 100vw;
position: absolute;
width: 400px;
left:-webkit-calc(100%/2 - 842px);
left:-moz-calc(100%/2 - 842px);
left:calc(100%/2 - 842px);
z-index: 100;
}