如何將 div 的內容圍繞特定元素居中？

Question

我正在使用 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。

例子：

您可以看到藍色和綠色相交的部分是頁面的中心。 我怎樣才能讓綠色的中間是頁面的中心？

Answer 1

1. 添加另一個包裝器： <div>

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

對於容器，您將width屬性設置為更大一點，然后更改justify-contant: start 。 這樣，綠色 div 將如您所願位於您的頁面中間。

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

Answer 2

您可以使用 .red 的 class 設置元素的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>