如何将 div 的内容围绕特定元素居中？答案

【问题标题】：How can I center the contents of a div, around a specific element?如何将 div 的内容围绕特定元素居中？
【发布时间】：2020-07-02 19:52:32
【问题描述】：

我正在使用 html 和 css。问题链接https://codepen.io/rybohi/pen/vYLpNzK

我有

<div class="container">
  <div class="red"></div>
  <div class="blue"></div>
  <div class="green"></div>
  <div class="yellow"></div>
</div>

目前我可以使用 css justify-content:center; 将项目居中但是我想要的是在中心有“绿色” div smack bang，然后有蓝色 div 和黄色 div 围绕它，以及蓝色 div 旁边的红色 div。

我试过 justify-self-center 但没有成功，当我将绿色 div 相对放置并离开 50vw 时，其他 div 都没有居中，绿色 div 也不是 smack bang center。

示例：

您可以看到蓝色和绿色相交的部分是页面的中心。我怎样才能使绿色的中间是页面的中心？

【问题讨论】：

这部分“蓝色的div和黄色的div包围着它，以及蓝色的div旁边的红色div”不清楚！
@Ryan 你想把 div 叠放在另一个上面吗？
我将编辑并展示示例
我进行了编辑

标签： html css

【解决方案1】：

您可以将元素的margin-left: -100px 设置为.red 类，并使您的span 元素成为弹性容器。

请看下面的演示：

div{
  width:100px; height:100px;
}

span {
  display: flex;
}

.container{
  width:100%;
  display:flex;
  justify-content:center;
}

.red{
  background-color:red;
  margin-left: -100px;
}
.blue{
  background-color:blue;
  
}
.green{
  background-color:green;
}
.yellow{
  background-color:yellow;
}

<div class="container">
  <span>
     <div class="red"></div>
      <div class="blue"></div>
  </span>
  <span>
    <div class="green"></div>
  </span>
  <span>
    <div class="yellow"></div>
    </span>
</div>

【讨论】：

【解决方案2】：

添加另一个包装器：<div>

.containerparent {
  width:100%;
  display:flex;
  justify-content:center;
}

对于容器，您将width 属性设置为更大一点，然后更改justify-contant: start。这样绿色的 div 就会如你所愿地出现在你的页面中间。

https://codepen.io/yael-screenovate/pen/eYJEqRB?editors=1100

【讨论】：

它需要是动态的