Vertically Center Elements With 3 Lines Of Code Header Image

Absolute Vertical & Horizontal Centering with CSS

We’ve all seen margin: 0 auto; for horizontal centering, but margin: auto; has refused to work for vertical centering… until now! But actually (spoiler alert!) absolute centering only requires a declared height* and these styles:

.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

Check out all the details behind this here on Smashing Magazine here