Center any Image in div while maintaining Aspect Ratio

This is very useful to keep things under control on the page.

div {
    float:left; 
    width: 50vh;
    height: 50vh;
    position:relative;
    border: 1px solid red;
}

img {
   position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-width: 100%;
    max-height: 100%;
    border: 1px solid green;
}