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

user_18377858 0
Viewed 37

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 class="scale"></div>
</body>

How can I center the div while scaling it up?

css html
2 Answers

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

.scale{
   transform-origin: center;
}
user_25447340

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 class="scale"></div>
</body>

user_108674540
Related