Css Aligning Items Horizontally And Vertically Complete Guide

 Last Update:2025-06-22T00:00:00     .NET School AI Teacher - SELECT ANY TEXT TO EXPLANATION.    8 mins read      Difficulty-Level: beginner

Understanding the Core Concepts of CSS Aligning Items Horizontally and Vertically

Horizontal Alignment

Text Content

  • text-align Property:
    This property aligns text within an element. Common values include left, center, right, and justify.
    Example:
.container {
  text-align: center;
}

This will center all text within .container.

Block-Level Elements

  • margin Property:
    By setting both left and right margins to auto on 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:
    The justify-content property aligns flex items along the main axis (horizontally). Values like flex-start, flex-end, center, space-between, and space-around can 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 to justify-content but 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’s justify-items. Example:
.container {
  display: grid;
  justify-items: end;
}

.item {
  justify-self: start; /* Overrides container's alignment */
}

Vertical Alignment

Using Flexbox

  • align-items Property:
    Aligns flex items along the cross axis (vertically). Options include stretch (default), flex-start, flex-end, center, baseline. Example:
.container {
  display: flex;
  align-items: center; /* Centers items vertically */
}
  • align-self Property:
    Overrides the align-items value for individual flex items. Example:
.container {
  display: flex;
  align-items: flex-start;
}

.item {
  align-self: center; /* Overrides container's vertical alignment */
}

Grid Layout

  • align-items Property:
    Works similarly to align-items in flexbox but for grid items within their area. Example:
.container {
  display: grid;
  align-items: baseline; /* Aligns items based on baseline */
}
  • align-self Property:
    Also available in grid layout to override the align-items property 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 absolute and vertical-align:
    While vertical-align doesn'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: table and display: table-cell:
    By setting a parent element to table and its child to table-cell, and then using vertical-align, you can simulate vertical alignment. Example:

Online Code run

🔔 Note: Select your programming language to check or run code at

💻 Run Code Compiler

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-content controls the alignment of the children along the main axis (horizontally by default).
    • flex-start aligns items to the start.
    • flex-end aligns items to the end.
    • center centers items.
    • space-between distributes space between items.
    • space-around distributes 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-items controls the alignment of the children along the cross axis (vertically).
    • flex-start aligns items to the top.
    • flex-end aligns items to the bottom.
    • center centers 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-columns defines the number and size of columns.
  • justify-content aligns items along the inline axis (horizontally).
    • start aligns items to the start.
    • end aligns items to the end.
    • center centers items.
    • space-between distributes space between items.
    • space-around distributes 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-rows defines the number and size of rows.
  • align-items controls the alignment of the children along the block axis (vertically).
    • start aligns items to the top.
    • end aligns items to the bottom.
    • center centers 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.

You May Like This Related .NET Topic

📥 Download Code ▶️ Watch Online 📖 Read Description

Login to post a comment.