html body center,css - How to align entire html body to the center? - Stack Overflow

If I have one thing that I love to share with respect to CSS, it's MY FAVE WAY OF CENTERING THINGS ALONG BOTH AXES!!!

Advantages of this method:

Full compatibility with browsers that people actually use

No tables required

Highly reusable for centering any other elements inside their parent

Accomodates parents and children with dynamic (changing) dimensions!

I always do this by using 2 classes: One to specify the parent element, whose content will be centered (.centered-wrapper), and the 2nd one to specify which child of the parent is centered (.centered-content). This 2nd class is useful in the case where the parent has multiple children, but only 1 needs to be centered).

In this case, body will be the .centered-wrapper, and an inner div will be .centered-content.

...

The idea for centering will now be to make .centered-content an inline-block. This will easily facilitate horizontal centering, through text-align: center;, and also allows for vertical centering as you shall see.

.centered-wrapper {

position: relative;

text-align: center;

}

.centered-wrapper:before {

content: "";

position: relative;

display: inline-block;

width: 0; height: 100%;

vertical-align: middle;

}

.centered-content {

display: inline-block;

vertical-align: middle;

}

This gives you 2 really reusable classes for centering any child inside of any parent! Just add the .centered-wrapper and .centered-content classes.

So, what's up with that :before element? It facilitates vertical-align: middle; and is necessary because vertical alignment isn't relative to the height of the parent - vertical alignment is relative to the height of the tallest sibling!!!. Therefore, by ensuring that there is a sibling whose height is the parent's height (100% height, 0 width to make it invisible), we know that vertical alignment will be with respect to the parent's height.

One last thing: You need to ensure that your html and body tags are the size of the window so that centering to them is the same as centering to the browser!

html, body {

width: 100%;

height: 100%;

padding: 0;

margin: 0;

}