html - 两个 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>