Rewritten title: Center a fixed HTML square or circle element horizontally and vertically when resized

Question

How to center a square or circle fixed html element of varying sizes horizontally and vertically? I think the difficulty arises from the fact that width and height must remain equal.

P粉002572690 · Answer

I think this problem can be easily solved with flex. Wrap related square or circle elements from a parent element (div). Then use justify-content and align-item properties to the parent tag. Here I use 100vh 100vw as the height and width of the parent container for demonstration. But you can change it according to your purpose.

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