TLDR Web Dev · ARTICLES & TUTORIALS

HOW TO CENTER A DIV IN CSS

joshwcomeau.com14 min read

Summary from the TLDR Web Dev newsletter

'How to center a div in CSS' is one of the most common questions developers google. There are various methods to center a div with CSS, such as by using text-align, flexbox, CSS Grid, positioned layout with auto margins, or a flow layout with auto margins. To choose the right method, a developer should decide if the centering is horizontal, vertical, or both, think about the number of elements being centered, and consider the layout context (flow, positioned, or grid). Flexbox is a good default choice for centering divs.