Centered container

How to use it

Use around articles, documentation pages, forms and anything people read in long runs, so lines stay readable on wide screens. Do not use it for dashboards, tables or galleries that need full width (let those span and keep only their text constrained). Adjust 65ch and the padding to your type scale; the grey outer frame is only there to show the container's edges in the demo.

Accessibility

A plain wrapper that caps the line length at about 65 characters (max-width: 65ch) and centres it with margin-inline: auto, which keeps long text comfortable to read and well within the 80-character guidance of WCAG 1.4.8; because the width is in ch units, it grows with the user's text size instead of clipping. Side padding keeps text off the screen edges on phones. Text is #0f172a on #ffffff (17.85:1), the caption #475569 on #ffffff (7.58:1), and the outer frame is a non-text #f1f5f9 band.

Source (copy-ready)

Copy code

<div class="dcl-center-container__frame">
  <div class="dcl-center-container">
    <h2 class="dcl-center-container__title">Why line length matters</h2>
    <p class="dcl-center-container__text">Lines that run the full width of a large screen make the eye travel a long way back to find the start of the next line, and readers lose their place. Around 50 to 75 characters per line is easier to follow.</p>
    <p class="dcl-center-container__text">This container stops growing at about 65 characters and sits in the middle of whatever space it is given, with padding so the text never touches the edges on a phone.</p>
    <p class="dcl-center-container__caption">Resize the window: the text column keeps the same comfortable width.</p>
  </div>
</div>
<style>
.dcl-center-container__frame { padding: 1rem 0; color: #0f172a; background-color: #f1f5f9; }
.dcl-center-container { box-sizing: border-box; max-width: 65ch; margin-inline: auto; padding: 1.25rem 1rem; font: inherit; line-height: 1.6; color: #0f172a; background-color: #ffffff; }
.dcl-center-container__title { margin: 0 0 0.75rem; font-size: 1.25rem; line-height: 1.3; color: #0f172a; background-color: #ffffff; }
.dcl-center-container__text { margin: 0 0 1rem; overflow-wrap: anywhere; color: #0f172a; background-color: #ffffff; }
.dcl-center-container__caption { margin: 0; font-size: 0.875rem; color: #475569; background-color: #ffffff; }
</style>