A Complete Guide - CSS Aligning Items Horizontally and Vertically
Last Updated: 03 Jul, 2025
Horizontal Alignment
Text Content
text-alignProperty:
This property aligns text within an element. Common values includeleft,center,right, andjustify.
Example:
.container {
text-align: center;
}
This will center all text within .container.
Block-Level Elements
marginProperty:
By setting both left and right margins toautoon a block-level element (like a<div>), you can center it horizontally.
Example:
.container {
width: 50%;
margin-left: auto;
margin-right: auto;
}
This makes .container centered horizontally, assuming it has a defined width.
Flexbox
- Using
justify-content:
Thejustify-contentproperty aligns flex items along the main axis (horizontally). Values likeflex-start,flex-end,center,space-between, andspace-aroundcan be used.
Example:
.container {
display: flex;
justify-content: space-around; /* Distributes space evenly */
}
Grid Layout
- Using
justify-items:
Aligns grid items inside their grid area along the inline (row) axis. Similar tojustify-contentbut for individual items. Example:
.container {
display: grid;
justify-items: start; /* Aligns items to the start of the column */
}
- Using
justify-self:
Applies to individual grid items. Allows overriding the default horizontal alignment set by the grid container’sjustify-items. Example:
.container {
display: grid;
justify-items: end;
}
.item {
justify-self: start; /* Overrides container's alignment */
}
Vertical Alignment
Using Flexbox
align-itemsProperty:
Aligns flex items along the cross axis (vertically). Options includestretch(default),flex-start,flex-end,center,baseline. Example:
.container {
display: flex;
align-items: center; /* Centers items vertically */
}
align-selfProperty:
Overrides thealign-itemsvalue for individual flex items. Example:
.container {
display: flex;
align-items: flex-start;
}
.item {
align-self: center; /* Overrides container's vertical alignment */
}
Grid Layout
align-itemsProperty:
Works similarly toalign-itemsin flexbox but for grid items within their area. Example:
.container {
display: grid;
align-items: baseline; /* Aligns items based on baseline */
}
align-selfProperty:
Also available in grid layout to override thealign-itemsproperty for specific grid items. Example:
.container {
display: grid;
align-items: end; /* Aligns all items to the end of their rows */
}
.item {
align-self: center; /* Overrides container's vertical alignment */
}
Using Positioning
- Position
absoluteandvertical-align:
Whilevertical-aligndoesn't work on block elements, absolute positioning combined with transform techniques provides a workaround. Example:
.container {
position: relative;
height: 200px;
}
.item {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
This positions .item exactly in the middle of .container vertically.
Table Display
- Using
display: tableanddisplay: table-cell:
By setting a parent element totableand its child totable-cell, and then usingvertical-align, you can simulate vertical alignment. Example:
Online Code run
Step-by-Step Guide: How to Implement CSS Aligning Items Horizontally and Vertically
Using Flexbox
1. Aligning Horizontally
Step 1: Create the HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Horizontal Alignment</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
Step 2: Add Basic CSS
/* styles.css */
body {
display: flex;
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically (optional, if the container has height) */
height: 100vh; /* Full viewport height */
margin: 0;
}
.container {
display: flex;
justify-content: space-around; /* Can change to space-between, center, flex-start, flex-end */
width: 50%;
background-color: lightgray;
padding: 20px;
border: 1px solid black;
}
.item {
background-color: lightblue;
padding: 20px;
border: 1px solid black;
}
Step 3: Explanation
display: flex;makes the container a flex container.justify-contentcontrols the alignment of the children along the main axis (horizontally by default).flex-startaligns items to the start.flex-endaligns items to the end.centercenters items.space-betweendistributes space between items.space-arounddistributes space around items.
2. Aligning Vertically
Step 1: Create the HTML Structure (Same as above)
Step 2: Add Basic CSS
/* styles.css */
body {
display: flex;
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
height: 100vh;
margin: 0;
}
.container {
display: flex;
flex-direction: column; /* Change to column for vertical alignment */
align-items: center; /* Can change to flex-start, flex-end */
width: 50%;
background-color: lightgray;
padding: 20px;
border: 1px solid black;
}
.item {
background-color: lightblue;
padding: 20px;
border: 1px solid black;
}
Step 3: Explanation
flex-direction: column;changes the main axis from horizontal to vertical.align-itemscontrols the alignment of the children along the cross axis (vertically).flex-startaligns items to the top.flex-endaligns items to the bottom.centercenters items.
Using CSS Grid
1. Aligning Horizontally
Step 1: Create the HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Horizontal Alignment</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
Step 2: Add Basic CSS
/* styles.css */
body {
display: flex;
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically (optional, if the container has height) */
height: 100vh;
margin: 0;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Creates 3 equal columns */
justify-content: space-around; /* Can change to space-between, center, start, end */
width: 50%;
background-color: lightgray;
padding: 20px;
border: 1px solid black;
}
.item {
background-color: lightblue;
padding: 20px;
border: 1px solid black;
}
Step 3: Explanation
display: grid;makes the container a grid container.grid-template-columnsdefines the number and size of columns.justify-contentaligns items along the inline axis (horizontally).startaligns items to the start.endaligns items to the end.centercenters items.space-betweendistributes space between items.space-arounddistributes space around items.
2. Aligning Vertically
Step 1: Create the HTML Structure (Same as above)
Step 2: Add Basic CSS
/* styles.css */
body {
display: flex;
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
height: 100vh;
margin: 0;
}
.container {
display: grid;
grid-template-rows: repeat(3, 1fr); /* Creates 3 equal rows */
align-items: center; /* Can change to start, end */
width: 50%;
background-color: lightgray;
padding: 20px;
border: 1px solid black;
}
.item {
background-color: lightblue;
padding: 20px;
border: 1px solid black;
}
Step 3: Explanation
grid-template-rowsdefines the number and size of rows.align-itemscontrols the alignment of the children along the block axis (vertically).startaligns items to the top.endaligns items to the bottom.centercenters items.
Summary
Using Flexbox and CSS Grid, you can align items horizontally and vertically in a flexible and powerful way. Flexbox is great when dealing with single-dimensional layouts, while Grid is excellent for two-dimensional layouts.
Login to post a comment.