Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial

Chloe Brittain
Courses Plus Student 2,082 PointsVertically center an object in a div?
I know vertical-align doesn't work for this. I want to vertically center an object, like an image, in a div - such as a logo vertically centered in a header. Is there an easy way to do this, like the margin:auto; that centers an object horizontally?
Thanks,
Chloe
4 Answers

Matthew Willmott
9,426 PointsNot sure if something in this article might help you: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

Kevin Jennings
3,630 PointsThis may help you out: StackOverflow: How to vertically align an image inside of a div.

austenpayan
10,218 PointsEasiest way I have found, and one I use all the time is this:
#element {
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
I forgot where I found this solution (some blog), but yeah anyways it works like a charm.
note: this horizontally and vertically centers an element. If you just want vertical centering and the horizontal position to be somewhere else you can play with the "left" property value.
also: parent container should have its position set to relative in order for this to work.

Zen Hess
6,700 PointsThis rules, thanks for sharing.

Neville Barrett
6,141 PointsHey try this out: http://jsfiddle.net/kizu/4RPFa/74/
Neville Barrett
6,141 PointsNeville Barrett
6,141 PointsThat seems like a much better method.