重新写的标题：在改变大小的情况下，水平和垂直居中一个固定的HTML方形或圆形元素

Question

如何使尺寸变化的方形或圆形固定 html 元素水平和垂直居中？我认为宽度和高度必须保持相等这一事实带来了困难。

Answer 1

我认为这个问题可以通过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;
}