Foundation - Image Leaves Container In Ipad/iphone

Images seem to be leaving their respective containers and appearing on top of the text below it. This only happens for mobile devices. In desktop, even if I zoom to 500%, it won't

Solution 1:

I figured out the issue.

Code like the following:

top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);

Is part of the whole vertical aligning thing. But doesn't seem mobile friendly at all. I made a media query to fix it.