Axis Twelve Centering
Build faster, center easier. The 12-column solution.
Row Component
Basic Row - Horizontal Centering
Row with Content
Row Component
This content is centered with consistent max-width using the .row
and .column components.
Perfect for page layouts and article content.
<div class="row">
<div class="column">
<h1>Centered Content</h1>
<p>Your content here</p>
</div>
</div>
Column Component
Column - Centered Items
Column - Vertical Centering
Column - Multiple Items
Column Item 1
Column Item 2
Column Item 3
<div class="column center">
<div>Item 1</div>
<div>Item 2</div>
</div>
Flexbox Centering
Center Horizontally with Flexbox
Center Vertically with Flexbox
Center Both Directions (Perfect Center)
Multiple Items - Center Group
<div class="flex justify-center items-center">
<div>Perfectly Centered</div>
</div>
Grid Offset Centering
Single Centered Column (offset-3 col-6)
Multiple Centered Columns
Offset 2, Col 8
Offset 4, Col 4
<div class="grid">
<div class="offset-3 col-6">Centered</div>
</div>
Hero Section Examples
Hero with Flexbox
Welcome
This is a hero section with flexbox
centering
Hero with Row Component
Welcome
This is a hero section with row
and column components
<div class="flex justify-center items-center flex-column">
<h1>Welcome</h1>
<p>Your content here</p>
</div>
Modal / Dialog Pattern
Centered Modal Dialog
Modal Dialog
This is a centered modal dialog. It's perfectly
centered both horizontally and vertically.
<div class="flex justify-center items-center">
<div class="modal">
<h3>Modal Content</h3>
<p>Dialog text</p>
</div>
</div>
Common Centering Patterns
Centered Button
Centered Icon with Text
✓
Success!
Your action was completed successfully
Centered Text Block
Centered Heading
This paragraph is centered and has a comfortable reading width.
Multiple paragraphs can be centered together.
<div class="row">
<div class="column">
<h2 style="text-align: center;">Centered</h2>
<p style="text-align: center;">Content</p>
</div>
</div>