The CSS Podcast 74: How do I center a div?
Oct 11, 2023
The hosts discuss various methods for centering a div using CSS, including horizontal and vertical centering, alignment, and stretching. They explore two centering strategies in CSS - content center and place items center. They also delve into techniques like the 'fluffy center' and 'pop and plop' for centering elements. Additionally, they discuss the concept of grid piles for stacking elements and cover different techniques for centering elements in CSS. Overall, this podcast provides practical tips and insights for mastering the art of centering divs in CSS.
AI Snips
Chapters
Transcript
Episode notes
Horizontal Centering with Text Align
- Use
text-align: centerfor horizontally centering inline elements like text. - Be mindful of side effects on child elements, especially boxes, as their text might also inherit center alignment.
Content Centering with Grid
display: gridwithplace-content: centeroffers a concise way to center content both horizontally and vertically.- It treats all children as a group, stretching shorter items to the widest item's width, useful for macro layouts.
Super Centering with Place Items
- Use
place-items: centerfor centering individual child elements within their parent. - Unlike
place-content,place-itemsadds space between elements when centering, making it useful for multiple items.