CSS Alignment

CSS does not have one universal align property. Alignment depends on what you are aligning: text, blocks, flex items, grid items or table cells.

Text alignment

p { text-align: center; }
Result:

Centered text.

Flexbox alignment

Use Flexbox for one-dimensional alignment. justify-content works on the main axis; align-items works on the cross axis.

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
Result:
Logo

Grid alignment

Use Grid for two-dimensional layouts. place-items centers on both axes.

.card { display: grid; place-items: center; }
Result:
Centered with Grid

Common mistake

Do not use the old HTML align attribute for layout. Use CSS alignment properties instead.