How to center an element vertically inside another element that is 100% height?

Question

I was using this technique http://codepen.io/chriscoyier/pen/gsodI . And it's almost good - but in the second box you can see that the content box sticks out of the outer element.

How to fix this so that if the inner element is smaller than the outer one, it gets centered, and if it's higher, it 'pushes' the outer element like in this image?

Answer 1

You need to give three major property to align vertically

• Height : ...;
• Display: table-cell;
• vertical-align: middle;