Basic Centering with `mx-auto`

1. Centering a `div` (block element)

This `div` has `w-1/2` and `mx-auto`. It is centered on the page.

Classes used: `w-1/2 mx-auto`

2. Centering a `flex` container

This `flex` container also has a width (`w-3/4 max-w-md`) and `mx-auto`. It is centered.

Classes used: `flex w-3/4 max-w-md mx-auto`

(`mx-auto` works on block-level elements, which `flex` and `grid` containers are by default, provided they have a defined width.)

3. Simulating a Centered Form Structure

Login Form

This entire form card (`max-w-sm bg-white ...`) is centered using `mx-auto`.