❮ Previous

CSS Align & Centering

  • Learn CSS techniques to align and center elements horizontally and vertically using various methods.

  • What is Alignment & Centering in CSS ?

    Alignment and centering in CSS control where text and elements are positioned inside their containers — horizontally, vertically, or both.

    In simple words:

    Alignment decides where content sits.
    Centering is the most common (and most confusing) alignment task in CSS.

    This topic is:
     • Frequently used
     • Frequently asked in interviews
     • Frequently confusing for beginners

    Why Alignment & Centering Are Important

    Proper alignment :

    Creates clean layouts
    Improves visual balance
    Makes UI look professional
    Is essential for buttons, cards, popups, and modals

    Real-life comparison:
    A painting centered on a wall looks perfect.
    If it’s slightly off, it looks wrong immediately.

    Types of Alignment 

    Text Alignment

    Text alignment controls horizontal positioning of text inside an element.

    text-align Property

    Common values:
     • left
     • center
     • right
     • justify

Text Alignment

text-align controls the horizontal positioning of text inside an element. 

p {
  text-align: center;
}
  • Centers text inside its container

Justify Text Alignment

text-align: justify; spreads text evenly across the line by adjusting spacing between words. 

p {
  text-align: justify;
}

  • Aligns text evenly on both sides

    Real-life comparison:
    Newspaper columns with clean left and right edges.

    text-align works on inline content (text, icons, inline elements)
    It does NOT move block elements themselves.

    Horizontal Centering (Elements)

    Used to center block-level elements like divs, cards, sections.

    Method 1: margin: auto

Centering a Block Element

margin: 0 auto; centers a block element horizontally when a width is specified. 

.box {
  width: 300px;
  margin: 0 auto;
}

  • Centers the element horizontally

    Real-life comparison:
    Placing a table exactly in the middle of a room.

    Method 2: Flexbox (Modern & Powerful)

Centering with Flexbox

Using display: flex; with justify-content: center; centers child elements horizontally in a modern and flexible way. 

.container {
  display: flex;
  justify-content: center;
}

  • Centers child elements horizontally

    Real-life comparison:
    People standing exactly in the center of a line.

    Method 3: text-align for Inline Elements

Centering Inline Elements

text-align: center; centers inline or inline-block elements inside a container. 

.container {
  text-align: center;
}

  • Centers inline elements like:
     • buttons
     • images
     • icons

    Vertical Centering (Most Confusing)

    Vertical centering was hard in old CSS — modern CSS makes it easy.

    Method 1: Flexbox (Recommended)

Vertical Centering with Flexbox

Using display: flex; with align-items: center; vertically centers content inside a container. 

.container {
  display: flex;
  align-items: center;
  height: 300px;
}

  • Perfect vertical centering

    Real-life comparison:
    An elevator stopping exactly at the middle floor.

    Method 2: Flexbox (Horizontal + Vertical)

Full Centering with Flexbox

Using justify-content: center; and align-items: center; centers content both horizontally and vertically. 

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

  • Full centering in both directions

    Method 3: CSS Grid (Simplest)

Centering with CSS Grid

display: grid; with place-items: center; centers content both horizontally and vertically in the simplest way. 

.container {
  display: grid;
  place-items: center;
}

  • One-line perfect centering
    Clean and modern

    Method 4: Position + Transform (Classic Method)

Centering with Position & Transform

Using position: absolute; with transform: translate(-50%, -50%); centers an element both horizontally and vertically relative to its parent. 

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

  • Works everywhere
    Used for modals and popups

    Real-life comparison:
    Marking the exact center point on a map.

Complete Centering Example (Flexbox)

This example uses Flexbox to perfectly center a card both horizontally and vertically on the screen. 

<!DOCTYPE html>
<html>
<head>
    <title>Centered Card Example</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .wrapper {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f4f4f4;
        }

        .card {
            width: 250px;
            padding: 20px;
            border: 2px solid #333;
            text-align: center;
            background-color: white;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="card">Centered Card</div>
    </div>
</body>
</html>

  • Card perfectly centered
    Clean and balanced layout
    Fully responsive

    Centering Images Horizontally

Centering Images Horizontally

Setting display: block; and margin: 0 auto; centers an image horizontally inside its container. 

img {
  display: block;
  margin: 0 auto;
}

  • Image is centered

    vertical-align Property

    Used with inline or table-cell elements, not for layouts.

Vertical Align Property

vertical-align adjusts the vertical position of inline or table-cell elements, not full layouts 

img {
  vertical-align: middle;
}

  • Aligns icons or images with text

    Real-life comparison:
    Aligning icons neatly next to text labels.

    Common Mistakes

    Using text-align to center block elements
    Ignoring element display type
    Forgetting to set height for vertical centering
    Overcomplicating centering logic

    Best Practices for Alignment & Centering

    Use Flexbox or Grid for most centering tasks
    Use margin: auto for simple horizontal centering
    Avoid outdated hacks unless required
    Keep centering logic clean and readable

    • Text alignment → controls text
    • Horizontal centering → spacing control
    • Vertical centering → layout mastery
    • Flexbox & Grid → modern solutions

    CSS alignment controls content placement
    Text alignment is simple and common
    Horizontal & vertical centering have multiple techniques
    Flexbox and Grid are the best modern tools
    Centering is a must-know CSS skill

❮ Previous