Solved: How can I horizontally center an element?


How can I horizontally center a <div> within another <div> using CSS?

Best Answer:

You can apply this CSS to the inner <div>:
Of course, you don’t have to set the width to 50%. Any width less than the containing <div> will work. The margin: 0 auto is what does the actual centering.
If you are targeting Internet Explorer 8 (and later), it might be better to have this instead:
It will make the inner element center horizontally and it works without setting a specific width.
Working example here:


With flexbox it is very easy to style the div horizontally and vertically centered.

To align the div vertically centered, use the property align-items: center.

If you have better answer, please add a comment about this, thank you!