How to center a DIV with CSS

To center a DIV horizontally

• Make sure the parent element is as wide as the page (width: 100%)
• Set the margin to auto

React example

<div style={{width: '100%'}}>
  <div style={{width: '800px', height: '600px', margin: 'auto', position: 'relative'}}>
  </div>
</div>

To center a DIV only vertically

• Set the position to absolute to take it out of the normal document flow
• Set the top to 50% to line up the top edge of the DIV with the center of the page vertically
• set the transform property to translate(0, 50%)

React example:

<div style={{width: '640px', height: '480px', top:'50%', transform: 'translate(0, -50%)', position: 'absolute'}}>
</div>

To center a DIV horizontally and vertically

• Use similar steps as above for vertical centering, but
  • set both the left and top properties to 50%
  • set the transform property to translate(-50%, -50%)

React example

<div style={{width: '640px', height: '480px', left: '50%', top:'50%', transform: 'translate(-50%, -50%)', position: 'absolute'}}>
</div>

For more information

There is a great article by Jamie Juviler at 11 Ways to Center Div or Text in Div in CSS