How to expand div from center instead of top left

Question

I have a login form centered in the middle of the screen with this CSS:

.login-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;

  align-items: center;
  padding: 50px 40px;
  color: white;
  background: rgba(0,0,0,0.8);
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 0.4px 0.4px rgba(128, 128, 128, 0.109),
    0 1px 1px rgba(128, 128, 128, 0.155),
    0 2.1px 2.1px rgba(128, 128, 128, 0.195),
    0 4.4px 4.4px rgba(128, 128, 128, 0.241),
    0 12px 12px rgba(128, 128, 128, 0.35);
}

After the user logs in I want to expand the div to 100% to show other content. After the user has pressed the login button the class of the div changes to this CSS:

.full{
    width: 100%;
    height: 100%;
    transition: 2s;
}

It does the job, but the div moves to the top left corner and starts expanding from there. How to make it expand from the middle?

Answer 1

Don't change the class, add it:

document.getElementById("div-id").className += " full";

Answer 2

You can try using tranform for this. In your initial class, set the X scale to 0 and transform the origin to the center. Then in your animation class, just change thr X scale to 1 and transition the change like this:

.login-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    transform: scaleX(0);
    transform-origin : 50%;


.full {
transform : scaleX(1);
transition : transform 200ms ease-in;
}