Search code examples
csshtmlcenter

Center a div in CSS

I'm trying to center a <div> horizontally.

I already have text-align: center; on the <div> itself, but it does not work.

Any suggestions?

Solution

  • The text-align: center; only centers the element's inline contents, not the element itself.

    If it is a block element (a div is), you need to set margin: 0 auto;, else if it is an inline element, you need to set the text-align: center; on its parent element instead.

    The margin: 0 auto; will set top and bottom margin to 0 and left and right margin to auto (of the same size) so that it automagically puts itself in the center. This only works if the block element in question has a known width (either fixed or relative), else it cannot figure where to start and end.