The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › CSS › Vertically center an image within a container
Hi, does anyone know the HTML5/CSS codes for this image? http://uploadpie.com/7rSI5?
I want the photo to fall exactly in the center vertically as shown in above link.
The current codes: http://codepen.io/anon/pen/dobPvO
Thanks.
img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
That’s the somewhat oldschool method of accomplishing this. There’s an article here about this subject: http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
And then there’s Flexbox: http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
I like the transform… don’t forget a webkit prefixed rule though.
+1 for transform. Its fantastic.
position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
http://codepen.io/vinsongrant/pen/gpYEQr