如何在 CSS 的 div 中居中兩個重疊的圓圈？

Question

我試圖在一個 div 中居中兩個重疊的圓圈，但由於 margin-right -100 的樣式，它不起作用。 這就是導致它們重疊的樣式。 我試圖在它周圍的 div 上設置 margin: 0 auto 的樣式，但它不起作用。 我還嘗試使用一些引導程序並制作列來幫助它們居中，但到目前為止沒有任何效果。 我在下面添加了一個 codepen 以進行適當的演示。

 #projects { background-color: #3f4756; width: 100%; height: auto; text-align: center; padding-top: 15em; padding-bottom: 10em; margin: 0 auto; } #projects h2{ color: white; font-family: BrandonGrotesque, Brandon Grotesque; font-size: 3.75em; margin-bottom: 1.5em; font-style: normal; font-weight: 500; letter-spacing: 2px; }.circle { display: inline-block; height: 30em; width: 30em; line-height: 18px; border-radius: 50%; color: white; margin: 0 0 0 -100px; } #projects > a:nth-child(3){ position: relative; z-index: 1; background-color:#a3abbd; text-decoration: underline; } #projects > a:nth-child(2){ position: relative; z-index: 2; background-color: #a4844e; text-decoration: underline; } #projects > a:nth-child(2) > p, #projects > a:nth-child(3) > p { margin-top: 4em; font-size: 3em; font-family: BrandonGrotesque, Brandon Grotesque; font-weight: 350; }

 <div id="projects" class="skew"> <h2>My Projects</h2> <a href="#" class="circle"> <p>web</p> </a> <a href="#" class="circle"> <p>graphics</p> </a> </div>

Answer 1

我不確定這是否正是您想要使圓圈居中的方式，所以我將兩個圓圈在一個div中連續居中，一個與另一個略微重疊。 您可以在這里查看它的外觀。

您可以看到我使用Flexbox來實現該結果。 我將兩個圓圈都包裹在我使用display: flex的div中。 最重要的是，我再次使用display: flex和相關的 flexbox 屬性將div中每個圓圈的文本居中。

顯然，您現在可以根據自己的喜好使用每個圓圈的大小。

希望能幫助到你。

Answer 2

您也可以在引導程序中使用 flexbox 只需將 class d-flex justify-content-center添加到父級，也可以align-items-center