Q:

How to Animate a div to the Center of an Element

I want to animate a div to the center of its parent. I'm taking a mobile-first approach where my div is at the center of its parent occupying 90% of its parent's width. When @media only screen and (min-width: 800px) is reached the width of the div is animated down to 400 pixels. 
My problem is when the parent's width is below the break point the div immediately jumps to the center and occupies 90% of the parent's width. 
How would I reverse this effect whereby if the parent's width is below the break point the div is animated to the center and the width is animated to occupy 90% of the parent's width?
Here's the CSS:
.container {
  background: white;
}
.box {
  background: red;
  width: 90%;
  height: 100px;
  margin: 0 auto;
  transition: width 1s, margin 2s;

}
@media only screen and (min-width: 800px) {
  .box {
    width: 400px;
    margin: 0 0 0 4em;
  }
}

Here's the HTML:
<div class="container">
  <div class="box"></div>
</div>

Here's the fiddle https://jsfiddle.net/p38nrhu2/
Thanks for your time!

A:

My best solution to this involved changing the CSS properties. I used absolute positioning to layout the red box and removed the margins and used the positioning elements top and left to mimic the margins. 
Here's the CSS:
.container {
    background: #fff;
    position: relative;
}
.box {
    width: 90%;
    height: 100px;
    background: red;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    transition: left 1s, width 1s;
    background: red;
}

@media only screen and (min-width: 800px) {
    .box {
        width: 400px;
        left: 200px;
    }
}

Here's the HTML:
<div class="container">
    <div class="box"></div>
</div>

This animates the width down to 400px and to the left when the breakpoint of @media only screen and (min-width: 800px) is reached. Otherwise, the red box is translated back to the center.
Here's the fiddle https://jsfiddle.net/qchdj7sv/1/

