CSS Align — Centering Things

"How do I center this?" depends on what you're centering.

Center text horizontally

p { text-align: center; }

Center a block element horizontally

.box {
  width: 400px;
  margin: 0 auto;
}

Center anything, both axes, with flexbox (recommended)

.container {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
  height: 300px;
}

Center with absolute positioning + transform

Useful when you can't use flexbox on the parent:

.container { position: relative; height: 300px; }

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Flexbox (next-but-one chapter) is the modern default for anything beyond plain text — it handles centering, spacing, and alignment together without the older tricks above.