Centered Column

You might say

Keep the content in a narrow column with space on both sides instead of stretching it across the whole screen, like a blog.

Keep one narrow content column centered on the pageA centered column focuses attention on reading or one simple task such as signing in, composing a post, or changing settings. Set a comfortable maximum width and keep supporting actions nearby. It is not suitable for dense dashboards that need side-by-side comparison.
Content columncentered and limited to 600~720px

When to use it

  • Article or essay
    ↔ 60–75 characters per line
  • Sign-in and account setup
    Content column
  • Focused form
    oil-oil••••••••
    Sign in
  • Simple settings or editor
    Body text needs a readable size and line height for long-form reading.

When NOT to use it

  • Place wide tables in a narrow column
  • Center-align long body paragraphs
  • Let the column grow too wide on large screens
    Sign-in card
  • Use excessive empty margins when more context is needed
    This is a long center-aligned paragraph. Every line starts somewhere different, making it tiring after only two lines.
Anatomy
Login card
Leave blank space on both sides to help focus attention on the middle
Centered width limit 600~720px, 60~75 characters per line
Article, form, or a login card
Variants
Reading
Long text reading, 60~75 characters per line
Auth Card
Log in, register, retrieve password
Form
Settings page, single column form
Typical use cases
Article
Why did I move my blog to a static site
Ali · 3 days ago · Read in 6 minutes
Login
Login Register
Forgot your password?
Create post
Personal information
Nickname
Weekly featured emails
Profile settings
Subscription successful!
Front-end Weekly is delivered to you@example.com on time at 8 a.m. every Friday
Further reading