Centered layout
Main content gathered around the page's middle axis, usually inside a width-limited wrapper with equal space on both sides.
See it
What it is
A centered layout arranges the main composition around the page's central vertical axis, so it is horizontally centered. Usually that means a width-limited wrapper with equal space on both sides; the content inside can still be left aligned, split into columns, or allowed to break out wider. The idiom everyone learned is margin: 0 auto on that wrapper, now written as margin-inline: auto.
Reach for it when the page needs one calm focal area, especially for articles, forms, pricing introductions, and focused marketing pages. The centered wrapper keeps the composition stable as the viewport grows.
Gotcha: centered layout is not the same as centering every sentence. Long centered paragraphs are hard to track, so keep body copy left aligned. A wrapper also needs fluid side padding or it will touch the screen edge on small devices.
Ask AI for it
Build a centered page wrapper with inline-size: min(100% - 2rem, 72rem) and margin-inline: auto. Keep the composition on the central page axis, limit prose inside it to max-inline-size: 65ch, and left-align body copy. Use CSS Grid for any inner columns, and preserve at least 1rem of fluid side space at narrow widths.