重寫的標題：在改變大小的情況下，水平和垂直居中一個固定的HTML方形或圓形元素

Question

如何使尺寸變化的方形或圓形固定html元素水平和垂直居中？我認為寬度和高度必須保持相等這一事實帶來了困難。

P粉002572690 · Answer

我認為這個問題可以透過flex輕鬆解決。將相關的方形或圓形元素從父元素（div）包裹起來。然後使用 justify-content 和align-item 屬性到父標籤。這裡我使用100vh 100vw作為父容器的高度和寬度來進行示範。但您可以根據您的目的更改它。

.container{
  min-width:100vw;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.my-element{
  width:100px;
  height:100px;
  background-color:#000000;
}

.container{
  min-width:100vw;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.my-element{
  width:100px;
  height:100px;
  background-color:#000000;
}