center vertically the content of a div ( not by line-height )

Question

I have a div which I need to center vertically its content:

Free coffee for all the people who visit my restaurant&l         


        
      

Answer 1

If your inner div has a flexible height you can center it using CSS transforms:

#coffee {
    width: 300px;
    position:relative;
}
#coffee > div {
    background:#ddffff;
    position:absolute;
    top:50%;
    max-height:100%;
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    transform:translateY(-50%);
}

http://jsfiddle.net/2Mb39/16/