MoreLesson 241Free preview
Center Button in DIV
This lesson is part of How To · All levels
Summary
The buttons can be centered inside the div in different ways depending on its layout. If the button is inline-block, text-align: center on parent is enough. For more complete controls, use flexbox, whereas margin: 0 auto only works on block elements that have width.
Key points
- The button is by default inline-blocked, so text-align: center on parent centers it.
- Flexbox with justify-content: center centered buttons horizontally; align-items: centered to vertical.
- Margin: 0 auto centers on block elements that have width, not inline-blocks without width.
- If you use position: absolute, combine left: 50% with translateX(-50%).
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.