Bi-directional CSS height animation

Question

@keyframes mgm {
  from {
    max-height: 250px;
  }
  
  to {
    max-height: 0px;
  }
}
  
.mgm {
    width: 180px;
    border: 1px solid black;
    padding: 10px;
    animation: mgm 1s ease-in-out;
    max-height: 250px;
    overflow:hidden;
}

<div class="mgm">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, 
  blanditiis qui porro possimus commodi laudantium voluptatum accusantium. 
  Maxime alias dolorum quo aliquam delectus qui illo officiis, consequuntur 
  asperiores fugiat ducimus!
</div>

By running above code, height of the content is decreasing from bottom only and animation stops at the top. But I want to decrease the height from both bottom and top equally i.e; animation should stop at the centre of the content.

How to achieve this ?

Alternate approach - Yes we can do this by using scaleY CSS property but it shrinks the internal content. As given below -

@keyframes mgm {
  from {
    transform:scaleY(1);
  }
  
  to {
    transform:scaleY(0);
  }
}
  
.mgm {
    width: 180px;
    border: 1px solid black;
    padding: 10px;
    animation: mgm 1s ease-in-out;
    max-height: 250px;
    overflow:hidden;
}

<div class="mgm">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, 
  blanditiis qui porro possimus commodi laudantium voluptatum accusantium. 
  Maxime alias dolorum quo aliquam delectus qui illo officiis, consequuntur 
  asperiores fugiat ducimus!
</div>

Answer 1

@dommmm's Answer is also correct. In case if you don't want to play with positioning you can achieve it with flex as well. This also has same approach of wrapping the animated div in a container. Here the height is fixed to 250px (same as the max height of the animated div) to avoid page scrolling. And then the animated div is positioned to center. I've also reduced padding top and bottom from 10px to 0px to achieve the div closing completely.

.animation-container {
      display: flex;
      align-items: center;
      height: 250px;
    }

@keyframes mgm {
  from {
    max-height: 250px;
    padding: 10px 10px;
  }
  to {
    max-height: 0px;
    padding: 0px 10px;
  }
}

.animation-container {
  display: flex;
  align-items: center;
  height: 250px;
}

.mgm {
  width: 180px;
  border: 1px solid black;
  padding: 10px;
  animation: mgm 1s ease-in-out alternate infinite;
  max-height: 250px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

<div class="animation-container">
  <div class="mgm">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, blanditiis qui porro possimus commodi laudantium voluptatum accusantium. Maxime alias dolorum quo aliquam delectus qui illo officiis, consequuntur asperiores fugiat ducimus!
  </div>
</div>