How can I scale something while centering it using justify-content: center?-CodePudding

I have a div element that I want to center in the middle of the page, but when I add transform: scale(3), it's not centered anymore. The div is 112px in width and height and I dont want to use position nor left/right/top/bottom.

body {
  display: flex;
  justify-content: center;
  align-items: center;
}
.scale {
  transform: scale(3);
}
div {
  width: 112px;
  height: 112px;
  background: #333;
}

<body>
  <div ></div>
</body>

How can I center the div while scaling it up?

CodePudding user response：

You can change the transform point to the center. try add the css below to the scale element.

.scale{
   transform-origin: center;
}

CodePudding user response：

Transforming an element makes no difference to the amount of space it occupies. It is centered in the sense the height of the body has not changed.

If you experiment with say giving the body a height that isn't just dependent on the height of that element then you will see that the element remains centered more clearly. (Run the snippet in full page)

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.scale {
  transform: scale(3);
}
div {
  width: 112px;
  height: 112px;
  background: #333;
}

<body>
  <div ></div>
</body>