Umgeschriebener Titel: Zentrieren Sie ein festes HTML-Quadrat- oder Kreiselement horizontal und vertikal, wenn die Größe geändert wird

Question

Wie zentriert man ein quadratisches oder kreisförmiges festes HTML-Element unterschiedlicher Größe horizontal und vertikal? Ich denke, die Schwierigkeit liegt darin, dass Breite und Höhe gleich bleiben müssen.

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;
}