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

I always using tutorial from this article to center things. It's great

div.container3 {
   height: 10em;
   position: relative }              /* 1 */
div.container3 p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */

The essential rules are:

1. Make the container relatively positioned, which declares it to be a container for absolutely positioned elements.
2. Make the element itself absolutely positioned.
3. Place it halfway down the container with 'top: 50%'. (Note that 50%' here means 50% of the height of the container.)
4. Use a translation to move the element up by half its own height. (The '50%' in 'translate(0, -50%)' refers to the height of the element itself.)