Align vertically using CSS 3

Question

With CSS 3, are there any way to vertically align an block element? Do you have an example? Thank you.

Answer 1

a couple ways:

1. Absolute positioning-- you need to have a declared height to make this work:

   
Hey


div {height: 100%; width: 100%; position: relative}
div.center {
     width: 100px;
     height: 100px;
     top: 50%;
     margin-top: -50px;
}

*2. Use display: table http://jsfiddle.net/B7CpL/2/ *

     
     
text centered with image



div {
     display: table;
     vertical-align: middle
}

div img,
div.text {
     display: table-cell;
     vertical-align: middle
}

1. A more detailed tutorial using display: table

http://css-tricks.com/vertically-center-multi-lined-text/