Horizontally center div elements with css



Learn how to horizontally center div elements with margin in this post. 

To horizontally center div elements (block elements) you need to set a width first:

#centered-element{
width: 750px;
}

And then set the margin to 0 auto:



#centered-element{
width: 750px;
margin: 0 auto;
}

Since the element now has a known width, a browser can calculate the unused width. The auto value forces the browser to equally distantiate the div block from the left and right.

More CSS tutorials