Tech- Brew

The best page to pretend you're working
A Blog written by Zanidd
Card image cap

Horizontally center div elements with css

September 26, 2016 by Zanidd

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


Categories

Newsletter





Search