CSS Alignment - Centering & Alignment
Alignment is one of the most frequently needed — and often the most confusing — aspects of CSS. There are many ways to align elements: text-align, margin: auto, Flexbox centering, Grid centering, vertical-align, position: absolute + transform, and more.
Each method has an ideal use case:
- Text alignment — For inline text
- Flexbox — For centering containers
- Grid — For centering within a grid layout
- margin: auto — For centering block elements
- vertical-align — For inline/inline-block elements
- position + transform — For precise centering
Code Example
All Alignment Methods
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Alignment</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, sans-serif;
padding: 30px;
background: #f0f2f5;
color: #334155;
}
h2 {
margin-bottom: 15px;
color: #1a1a2e;
}
.section {
margin-bottom: 40px;
}
.label {
font-size: 12px;
color: #64748b;
font-family: monospace;
background: #e2e8f0;
display: inline-block;
padding: 3px 8px;
border-radius: 4px;
margin-bottom: 15px;
}
.demo-box {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
margin-bottom: 15px;
}
/* ===== TEXT ALIGN ===== */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
/* ===== MARGIN AUTO CENTERING ===== */
.margin-auto-center {
width: 300px;
margin: 0 auto;
background: #667eea;
color: white;
padding: 15px;
border-radius: 8px;
text-align: center;
}
.margin-auto-right {
width: 200px;
margin-left: auto;
background: #f5576c;
color: white;
padding: 15px;
border-radius: 8px;
text-align: center;
}
.margin-auto-left {
width: 200px;
margin-right: auto;
background: #43e97b;
color: white;
padding: 15px;
border-radius: 8px;
text-align: center;
}
/* ===== FLEXBOX CENTERING ===== */
.flex-center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background: #f1f5f9;
border-radius: 12px;
border: 2px dashed #cbd5e1;
}
.flex-center-box {
background: #667eea;
color: white;
padding: 20px 40px;
border-radius: 10px;
font-weight: 600;
}
.flex-center-all {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background: #f1f5f9;
border-radius: 12px;
border: 2px dashed #cbd5e1;
}
.flex-evenly {
display: flex;
justify-content: space-evenly;
align-items: center;
height: 120px;
background: #f1f5f9;
border-radius: 12px;
border: 2px dashed #cbd5e1;
}
.flex-evenly-box {
background: #667eea;
color: white;
padding: 15px 25px;
border-radius: 10px;
font-weight: 600;
}
.flex-evenly-box:nth-child(2) {
background: #f5576c;
height: 80px;
}
.flex-evenly-box:nth-child(3) {
background: #43e97b;
height: 100px;
}
/* ===== GRID CENTERING ===== */
.grid-center {
display: grid;
place-items: center;
height: 200px;
background: #f1f5f9;
border-radius: 12px;
border: 2px dashed #cbd5e1;
}
.grid-center-box {
background: #667eea;
color: white;
padding: 20px 40px;
border-radius: 10px;
font-weight: 600;
}
.grid-flex-center {
display: grid;
place-content: center;
height: 200px;
background: #f1f5f9;
border-radius: 12px;
border: 2px dashed #cbd5e1;
}
/* ===== VERTICAL ALIGN ===== */
.valign-demo {
background: #f1f5f9;
border-radius: 12px;
border: 2px dashed #cbd5e1;
padding: 15px;
line-height: 3;
}
.valign-demo span {
background: #667eea;
color: white;
padding: 4px 12px;
border-radius: 4px;
font-size: 13px;
font-weight: 600;
}
.va-baseline { vertical-align: baseline; }
.va-sub { vertical-align: sub; }
.va-super { vertical-align: super; }
.va-top { vertical-align: top; }
.va-text-top { vertical-align: text-top; }
.va-middle { vertical-align: middle; }
.va-text-bottom { vertical-align: text-bottom; }
.va-bottom { vertical-align: bottom; }
/* ===== POSITION ABSOLUTE CENTERING ===== */
.pos-center {
position: relative;
height: 200px;
background: #f1f5f9;
border-radius: 12px;
border: 2px dashed #cbd5e1;
}
.pos-center-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #667eea;
color: white;
padding: 20px 40px;
border-radius: 10px;
font-weight: 600;
}
.pos-center-methods {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.pos-method {
flex: 1;
min-width: 250px;
}
.pos-method-box {
position: relative;
height: 180px;
background: #f1f5f9;
border-radius: 12px;
border: 2px dashed #cbd5e1;
margin-top: 8px;
}
.pos-method-label {
font-size: 13px;
color: #64748b;
margin-bottom: 5px;
}
/* Method 1: transform */
.m1-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Method 2: top/right/bottom/left 0 + margin auto */
.m2-center {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: fit-content;
height: fit-content;
}
/* Method 3: Flexbox in parent */
.m3-parent {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* Method 4: Grid in parent */
.m4-parent {
position: absolute;
inset: 0;
display: grid;
place-items: center;
}
.center-pill {
background: #667eea;
color: white;
padding: 10px 24px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
white-space: nowrap;
}
/* ===== ALIGN ITEMS/SELF DEMO ===== */
.align-demo {
display: flex;
align-items: flex-start;
gap: 15px;
height: 200px;
background: #f1f5f9;
border-radius: 12px;
border: 2px dashed #cbd5e1;
padding: 15px;
}
.align-demo-box {
background: #667eea;
color: white;
padding: 15px 20px;
border-radius: 10px;
font-weight: 600;
font-size: 13px;
text-align: center;
}
.align-demo-box:nth-child(1) { align-self: flex-start; }
.align-demo-box:nth-child(2) { align-self: center; }
.align-demo-box:nth-child(3) { align-self: flex-end; }
.align-demo-box:nth-child(4) { align-self: stretch; }
.align-demo-box:nth-child(5) { align-self: baseline; }
/* ===== HERO TEXT CENTERING ===== */
.hero-section {
position: relative;
height: 400px;
background: linear-gradient(135deg, #1a1a2e, #16213e);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(102,126,234,0.3), transparent);
border-radius: 50%;
top: -100px;
right: -100px;
}
.hero-content {
position: relative;
z-index: 1;
}
.hero-content h1 {
font-size: 48px;
margin-bottom: 15px;
line-height: 1.2;
}
.hero-content p {
font-size: 18px;
opacity: 0.8;
margin-bottom: 30px;
max-width: 500px;
}
.hero-btn {
display: inline-block;
padding: 14px 40px;
background: #667eea;
color: white;
text-decoration: none;
border-radius: 10px;
font-weight: 600;
font-size: 16px;
transition: background 0.3s;
}
.hero-btn:hover {
background: #5a67d8;
}
/* ===== INLINE ICON ALIGNMENT ===== */
.icon-alignment {
display: flex;
flex-direction: column;
gap: 12px;
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.icon-row {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
}
.icon-circle {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.icon-circle.blue { background: #dbeafe; }
.icon-circle.green { background: #dcfce7; }
.icon-circle.red { background: #fef2f2; }
.icon-circle.purple { background: #f3e8ff; }
/* ===== CARD CONTENT ALIGNMENT ===== */
.card-alignment-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.align-card {
background: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.align-card-icon {
width: 60px;
height: 60px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin-bottom: 15px;
}
.align-card-icon.bg-blue { background: #dbeafe; }
.align-card-icon.bg-green { background: #dcfce7; }
.align-card-icon.bg-purple { background: #f3e8ff; }
.align-card h3 {
font-size: 18px;
margin-bottom: 8px;
}
.align-card p {
color: #64748b;
font-size: 14px;
line-height: 1.5;
}
/* ===== SPACE BETWEEN SECTIONS ===== */
.space-between-demo {
display: flex;
justify-content: space-between;
align-items: flex-end;
height: 150px;
background: #f1f5f9;
border-radius: 12px;
border: 2px dashed #cbd5e1;
padding: 15px;
}
.space-between-item {
text-align: center;
}
.space-between-item .bar {
width: 60px;
border-radius: 8px 8px 0 0;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- Text Align -->
<div class="section">
<h2>Text Align</h2>
<span class="label">text-align: left | center | right | justify</span>
<div class="demo-box">
<p class="text-left" style="margin-bottom:10px;">Left-aligned text (default). Lorem ipsum dolor sit amet.</p>
<p class="text-center" style="margin-bottom:10px;">Center-aligned text. Lorem ipsum dolor sit amet.</p>
<p class="text-right" style="margin-bottom:10px;">Right-aligned text. Lorem ipsum dolor sit amet.</p>
<p class="text-justify">Justified text (both edges). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
</div>
</div>
<!-- Margin Auto -->
<div class="section">
<h2>Margin Auto Centering</h2>
<span class="label">margin: 0 auto | margin-left: auto | margin-right: auto</span>
<div class="demo-box">
<div class="margin-auto-left" style="margin-bottom:10px;">margin-right: auto (left)</div>
<div class="margin-auto-center" style="margin-bottom:10px;">margin: 0 auto (center)</div>
<div class="margin-auto-right">margin-left: auto (right)</div>
</div>
</div>
<!-- Flexbox Centering -->
<div class="section">
<h2>Flexbox Centering</h2>
<span class="label">justify-content + align-items: center</span>
<div class="flex-center">
<div class="flex-center-box">Perfectly Centered</div>
</div>
</div>
<!-- Flexbox Space Evenly -->
<div class="section">
<h2>Flexbox Space Evenly (varying heights)</h2>
<span class="label">justify-content: space-evenly + align-items: center</span>
<div class="flex-evenly">
<div class="flex-evenly-box">Box 1</div>
<div class="flex-evenly-box">Box 2</div>
<div class="flex-evenly-box">Box 3</div>
</div>
</div>
<!-- Grid Centering -->
<div class="section">
<h2>Grid Centering</h2>
<span class="label">place-items: center (single line!)</span>
<div class="grid-center">
<div class="grid-center-box">Grid Center</div>
</div>
</div>
<!-- Vertical Align -->
<div class="section">
<h2>Vertical Align (Inline Elements)</h2>
<span class="label">vertical-align: baseline | top | middle | bottom | etc.</span>
<div class="demo-box">
<div class="valign-demo">
Normal text with
<span class="va-baseline">baseline</span>,
<span class="va-sub">sub</span>,
<span class="va-super">super</span>,
<span class="va-top">top</span>,
<span class="va-text-top">text-top</span>,
<span class="va-middle">middle</span>,
<span class="va-text-bottom">text-bottom</span>,
<span class="va-bottom">bottom</span>.
</div>
</div>
</div>
<!-- Position Absolute Centering -->
<div class="section">
<h2>Position Absolute Centering</h2>
<span class="label">top:50% + left:50% + transform: translate(-50%,-50%)</span>
<div class="pos-center-methods">
<div class="pos-method">
<p class="pos-method-label"><strong>Method 1:</strong> transform: translate(-50%, -50%)</p>
<div class="pos-method-box">
<div class="center-pill m1-center">Transform</div>
</div>
</div>
<div class="pos-method">
<p class="pos-method-label"><strong>Method 2:</strong> inset: 0 + margin: auto</p>
<div class="pos-method-box">
<div class="center-pill m2-center">Margin Auto</div>
</div>
</div>
<div class="pos-method">
<p class="pos-method-label"><strong>Method 3:</strong> Parent Flexbox</p>
<div class="pos-method-box">
<div class="m3-parent">
<div class="center-pill">Flex Parent</div>
</div>
</div>
</div>
<div class="pos-method">
<p class="pos-method-label"><strong>Method 4:</strong> Parent Grid</p>
<div class="pos-method-box">
<div class="m4-parent">
<div class="center-pill">Grid Parent</div>
</div>
</div>
</div>
</div>
</div>
<!-- Align Self -->
<div class="section">
<h2>Align Self (per-item)</h2>
<span class="label">align-self: flex-start | center | flex-end | stretch | baseline</span>
<div class="align-demo">
<div class="align-demo-box">flex-start</div>
<div class="align-demo-box">center</div>
<div class="align-demo-box">flex-end</div>
<div class="align-demo-box">stretch</div>
<div class="align-demo-box">baseline</div>
</div>
</div>
<!-- Hero Section -->
<div class="section">
<h2>Hero Text Centering</h2>
<div class="hero-section">
<div class="hero-content">
<h1>Learn CSS<br>Until You're Proficient</h1>
<p>A complete CSS guide from basics to advanced, with practical examples</p>
<a href="#" class="hero-btn">Start Now</a>
</div>
</div>
</div>
<!-- Inline Icon Alignment -->
<div class="section">
<h2>Inline Icon Alignment</h2>
<span class="label">display: flex + align-items: center</span>
<div class="icon-alignment">
<div class="icon-row">
<div class="icon-circle blue">💻</div>
<span>Icon vertically aligned with text</span>
</div>
<div class="icon-row">
<div class="icon-circle green">✓</div>
<span>Using flex + align-items: center</span>
</div>
<div class="icon-row">
<div class="icon-circle red">✕</div>
<span>Easier than vertical-align</span>
</div>
<div class="icon-row">
<div class="icon-circle purple">★</div>
<span>Stable in all modern browsers</span>
</div>
</div>
</div>
<!-- Card Content Alignment -->
<div class="section">
<h2>Card Content Alignment</h2>
<div class="card-alignment-grid">
<div class="align-card">
<div class="align-card-icon bg-blue">📊</div>
<h3>Analytics</h3>
<p>Data-driven insights for your business.</p>
</div>
<div class="align-card">
<div class="align-card-icon bg-green">🔒</div>
<h3>Security</h3>
<p>Guaranteed data security.</p>
</div>
<div class="align-card">
<div class="align-card-icon bg-purple">🚀</div>
<h3>Performance</h3>
<p>Optimal speed on all devices.</p>
</div>
</div>
</div>
<!-- Space Between -->
<div class="section">
<h2>Space Between (Filling Space)</h2>
<span class="label">justify-content: space-between + align-items: flex-end</span>
<div class="space-between-demo">
<div class="space-between-item">
<div class="bar" style="height:40px; background:#667eea;"></div>
<p style="font-size:12px; margin-top:5px;">40px</p>
</div>
<div class="space-between-item">
<div class="bar" style="height:80px; background:#f5576c;"></div>
<p style="font-size:12px; margin-top:5px;">80px</p>
</div>
<div class="space-between-item">
<div class="bar" style="height:60px; background:#43e97b;"></div>
<p style="font-size:12px; margin-top:5px;">60px</p>
</div>
<div class="space-between-item">
<div class="bar" style="height:100px; background:#fa709a;"></div>
<p style="font-size:12px; margin-top:5px;">100px</p>
</div>
<div class="space-between-item">
<div class="bar" style="height:50px; background:#a18cd1;"></div>
<p style="font-size:12px; margin-top:5px;">50px</p>
</div>
</div>
</div>
</body>
</html>
Code Explanation
text-align
Controls text alignment inside a block element:
.left { text-align: left; } /* Default */
.center { text-align: center; }
.right { text-align: right; }
.justify { text-align: justify; } /* Justify */
Note: text-align: justify only works on multi-line text that is long enough. Single-line text is not affected.
margin: auto Centering
The most basic way to horizontally center a block element:
/* Center horizontal */
.element {
width: 300px;
margin: 0 auto;
}
/* Push to the right */
.element {
margin-left: auto;
}
/* Push to the left */
.element {
margin-right: auto;
}
Requirement: The element must have a defined width (or max-width). Without a width, the element will fill the entire container.
Flexbox Centering
The most popular and flexible way to center:
/* Horizontal + Vertical Center */
.parent {
display: flex;
justify-content: center; /* Horizontal */
align-items: center; /* Vertical */
}
/* Single line shorthand */
.parent {
display: flex;
place-items: center; /* justify + align */
}
When to use:
- Centering containers with content of various sizes
- Centering while the parent has a defined height
- Centering items in a single row
Grid Centering
The shortest method — one line:
.parent {
display: grid;
place-items: center; /* Everything centered */
}
/* Or for content only */
.parent {
display: grid;
place-content: center;
}
place-items: center = align-items: center + justify-items: center
vertical-align
Works only on inline and inline-block elements:
/* Baseline alignment (default) */
span { vertical-align: baseline; }
/* Vertical alignment options */
span { vertical-align: top; }
span { vertical-align: text-top; }
span { vertical-align: middle; }
span { vertical-align: text-bottom; }
span { vertical-align: bottom; }
span { vertical-align: sub; } /* Subscript */
span { vertical-align: super; } /* Superscript */
Important: vertical-align does NOT work on block elements. For block elements, use Flexbox or Grid.
position: absolute + transform
Precise centering that works anywhere:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
How it works:
1. top: 50% + left: 50% — Position the child's top-left corner at the center of the parent
2. transform: translate(-50%, -50%) — Shift the child left by 50% of its width and up by 50% of its height
Alternative Methods
/* Method 2: inset 0 + margin auto */
.child {
position: absolute;
inset: 0;
margin: auto;
width: fit-content;
height: fit-content;
}
/* Method 3: Flexbox in positioned parent */
.parent {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* Method 4: Grid in positioned parent */
.parent {
position: absolute;
inset: 0;
display: grid;
place-items: center;
}
align-items & align-self
/* align-items: alignment of all children */
.parent {
display: flex;
align-items: center; /* All children centered */
}
/* align-self: override for a single child */
.child {
align-self: flex-end; /* This child at the bottom */
}
Everyday Use Cases
1. Centering Hero Text
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
.hero {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 80vh;
background: linear-gradient(135deg, #0f172a, #1e293b);
color: white;
text-align: center;
padding: 40px 20px;
}
.hero-badge {
display: inline-block;
padding: 6px 16px;
background: rgba(102,126,234,0.2);
color: #818cf8;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
margin-bottom: 20px;
border: 1px solid rgba(102,126,234,0.3);
}
.hero h1 {
font-size: clamp(32px, 5vw, 56px);
line-height: 1.15;
margin-bottom: 20px;
max-width: 700px;
}
.hero p {
font-size: clamp(16px, 2vw, 20px);
opacity: 0.7;
margin-bottom: 30px;
max-width: 550px;
line-height: 1.6;
}
.hero-buttons {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
.hero-btn-primary {
padding: 14px 32px;
background: #667eea;
color: white;
text-decoration: none;
border-radius: 10px;
font-weight: 600;
transition: background 0.3s;
}
.hero-btn-primary:hover { background: #5a67d8; }
.hero-btn-secondary {
padding: 14px 32px;
background: transparent;
color: white;
text-decoration: none;
border-radius: 10px;
font-weight: 600;
border: 2px solid rgba(255,255,255,0.3);
transition: all 0.3s;
}
.hero-btn-secondary:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<section class="hero">
<span class="hero-badge">🚀 Version 3.0 Just Released</span>
<h1>The #1 Learning Platform for Developers</h1>
<p>Master the latest skills with experienced mentors, real-world projects, and a supportive community.</p>
<div class="hero-buttons">
<a href="#" class="hero-btn-primary">Start Free</a>
<a href="#" class="hero-btn-secondary">Browse Courses →</a>
</div>
</section>
</body>
</html>
2. Centered Modal
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; }
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1040;
padding: 20px;
}
.modal {
background: white;
border-radius: 16px;
width: 100%;
max-width: 440px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
overflow: hidden;
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid #e2e8f0;
}
.modal-header h3 {
font-size: 18px;
}
.modal-close {
width: 32px;
height: 32px;
border-radius: 8px;
border: none;
background: #f1f5f9;
cursor: pointer;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
}
.modal-body {
padding: 24px;
}
.modal-body p {
color: #64748b;
line-height: 1.6;
margin-bottom: 20px;
}
.modal-input {
width: 100%;
padding: 12px 16px;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 15px;
margin-bottom: 12px;
}
.modal-input:focus {
border-color: #667eea;
outline: none;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 16px 24px;
border-top: 1px solid #e2e8f0;
}
.modal-footer button {
padding: 10px 20px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
border: none;
}
.btn-cancel {
background: #f1f5f9;
color: #475569;
}
.btn-confirm {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="modal-backdrop">
<div class="modal">
<div class="modal-header">
<h3>Create a New Account</h3>
<button class="modal-close">×</button>
</div>
<div class="modal-body">
<p>Fill in the data below to register a new account.</p>
<input type="text" class="modal-input" placeholder="Full name">
<input type="email" class="modal-input" placeholder="Email">
</div>
<div class="modal-footer">
<button class="btn-cancel">Cancel</button>
<button class="btn-confirm">Sign Up</button>
</div>
</div>
</div>
</body>
</html>
Explanation: The modal is centered using Flexbox: display: flex + align-items: center + justify-content: center on the backdrop. This is the most reliable centering method for modals.
3. Centered Login Form
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
.login-page {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea, #764ba2);
padding: 20px;
}
.login-card {
background: white;
border-radius: 20px;
padding: 40px;
width: 100%;
max-width: 400px;
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
text-align: center;
}
.login-logo {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 32px;
color: white;
}
.login-card h2 {
margin-bottom: 8px;
}
.login-card .subtitle {
color: #94a3b8;
margin-bottom: 30px;
font-size: 14px;
}
.login-field {
text-align: left;
margin-bottom: 16px;
}
.login-field label {
display: block;
margin-bottom: 6px;
font-weight: 600;
font-size: 14px;
color: #475569;
}
.login-field input {
width: 100%;
padding: 12px 16px;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 15px;
transition: border-color 0.3s;
}
.login-field input:focus {
border-color: #667eea;
outline: none;
}
.login-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
font-size: 13px;
}
.login-options label {
display: flex;
align-items: center;
gap: 6px;
color: #64748b;
cursor: pointer;
}
.login-options a {
color: #667eea;
text-decoration: none;
font-weight: 600;
}
.login-submit {
width: 100%;
padding: 14px;
background: #667eea;
color: white;
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background 0.3s;
}
.login-submit:hover {
background: #5a67d8;
}
.login-footer {
margin-top: 24px;
font-size: 14px;
color: #94a3b8;
}
.login-footer a {
color: #667eea;
text-decoration: none;
font-weight: 600;
}
</style>
</head>
<body>
<div class="login-page">
<div class="login-card">
<div class="login-logo">⚡</div>
<h2>Log in to Your Account</h2>
<p class="subtitle">Welcome back! Please log in.</p>
<form>
<div class="login-field">
<label>Email</label>
<input type="email" placeholder="[email protected]">
</div>
<div class="login-field">
<label>Password</label>
<input type="password" placeholder="Enter password">
</div>
<div class="login-options">
<label><input type="checkbox"> Remember me</label>
<a href="#">Forgot password?</a>
</div>
<button type="submit" class="login-submit">Log In</button>
</form>
<p class="login-footer">Don't have an account? <a href="#">Sign up free</a></p>
</div>
</div>
</body>
</html>
Explanation: The login page uses full-viewport Flexbox for centering: min-height: 100vh, display: flex, align-items: center, justify-content: center. The card is perfectly centered both horizontally and vertically.
Conclusion
CSS alignment has many methods, each for a different use case. Selection guide:
| Need | Best Method |
|---|---|
| Text in a block | text-align |
| Horizontal block element | margin: 0 auto |
| Flexible centering | Flexbox (justify-content + align-items) |
| Shortest centering | Grid (place-items: center) |
| Inline elements | vertical-align |
| Absolute precision | position: absolute + transform: translate(-50%,-50%) |
| Per-item alignment | align-self |
Recommendation: Use Flexbox as your default centering method — it is the most flexible and supported by all modern browsers. Use Grid (place-items: center) for the shortest centering.