CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model that lets you arrange elements in a row or column, distributing space and aligning items efficiently. It is activated by setting display: flex or display: inline-flex on a container, which makes all direct children into flex items. Unlike older methods that relied on floats or tables, Flexbox was designed specifically for interface layout.

Flexbox is a one-dimensional layout system best suited for arranging items in a single row or column - ideal for navigation bars, button groups, and distributing items along one direction. CSS Grid is two-dimensional and handles both rows and columns simultaneously, making it better for overall page layouts and card grids. A common pattern is to use Grid for page structure and Flexbox for components within it.

Apply display: flex, justify-content: center, and align-items: center to the parent container. This centres the child along both the main and cross axes simultaneously. Make sure the container has a defined height, otherwise there is no cross-axis space to centre within.