How do you center an element horizontally in CSS?

There is no single "center" property — the right technique depends on what you are centering: text uses text-align, a fixed-width block uses auto side margins, and flex children use justify-content.

The three everyday cases:

Inline content or text — set text-align: center on the parent, which centres the text and inline elements inside it:

.container { text-align: center; }

A block element with a known width — give it auto left and right margins, which split the leftover space evenly on both sides:

.box {
    width: 200px;
    margin: 0 auto;   /* must have a width for this to do anything */
}

Flex children — make the parent a flex container and use justify-content (horizontal axis) and optionally align-items (vertical axis):

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

A quick lookup:

The most common mistake is margin: 0 auto doing nothing — almost always because the block has no explicit width and is already filling the row.

Go deeper:

• Centering in CSS: a complete guide (CSS-Tricks) — a decision tree covering horizontal, vertical, and both-axis centering for every kind of element.