center horizontally and vertically a square or rounded fixed html element which changing size

Question

How to center horizontally and vertically a square or rounded fixed html element which changing size ? I think that the fact that the width and the height must stay equal brings a difficulty.

What do you want the element to be centered on? Please add enough code for us to understand your context/HTML structure. The answer you have given is not written in CSS so I don't understand where scaling has come into it. Could you explain more what the exact requirement is? — A Haworth, Jan 01 '23 at 19:15

score 2 · Answer 1 · answered Jan 01 '23 at 18:27

I think this can be solved through flex easily. Wrap your relevant square or rounded element from a parent element(div). Then use justify-content and align-item properties to the parent tag. Here I have used 100vh 100vw as the height and the width of the parent container for the demonstration. But you can change that 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;
}

<div class="container">
  <div class="my-element">
  </div>
</div>

score -1 · Answer 2 · answered Jan 01 '23 at 17:01

The solutions shown here were not enough for my case: https://css-tricks.com/centering-css-complete-guide/ It must be not original at all but here's what I've done:

position: "fixed",
top: "0",
left: "0",
right: "0",
bottom: "0",
margin: "auto",
backgroundColor: "#f00",
borderRadius: "999px",
scaleX: scaleXx,
scaleY: scaleXx,
aspectRatio:1

Hope it helps. scaleXx is an exterior parameter.

center horizontally and vertically a square or rounded fixed html element which changing size

2 Answers2