Center alignment places elements along a central axis. Horizontal center alignment shares the center line of each element’s horizontal axis, while vertical center alignment shares the center of the vertical axis. This invisible line creates relationships, structure, and readability. section 2.1.2
Use center alignment deliberately:
- Align related elements to the same central axis so the page feels organized rather than random. section 2.1.2
- Check the whole component, including text alignment, because mixing alignment values can make it feel less cohesive. section 2.1.2
- Do not assume that shared center points guarantee order; poorly arranged center-aligned content can still feel disjointed. section 2.1.2
A hotel listing
Center-aligning hotel names may align them to the same point while making the page feel disjointed. Aligning the content to the left and placing each hotel name below its image creates a more orderly rectangular structure. section 2.1.2
