How to center vertically and horizontally css

CssHow-ToBeginner · 4 min read

How to Center Vertically and Horizontally in CSS: Simple Methods

To center an element both vertically and horizontally in CSS, use display: flex or display: grid on the parent container with justify-content: center and align-items: center. These properties align the child element in the middle of the container easily and responsively.

📐

Syntax

Use display: flex or display: grid on the parent container. Then add justify-content: center to center horizontally and align-items: center to center vertically.

For Flexbox:

display: flex; activates flex layout.
justify-content: center; centers children horizontally.
align-items: center; centers children vertically.

For Grid:

display: grid; activates grid layout.
place-items: center; centers children both vertically and horizontally.

css

/* Flexbox syntax */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid syntax */
.parent {
  display: grid;
  place-items: center;
}

💻

Example

This example shows a box centered vertically and horizontally inside a container using Flexbox.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Centering Example</title>
<style>
  body, html {
    height: 100%;
    margin: 0;
  }
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
  }
  .box {
    width: 150px;
    height: 150px;
    background-color: #4a90e2;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    border-radius: 8px;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="box">Centered Box</div>
  </div>
</body>
</html>

Output

A full browser window with a light gray background and a blue square box exactly in the center. The box has white text 'Centered Box' horizontally and vertically centered inside it.

⚠️

Common Pitfalls

Common mistakes include:

Not setting a height on the parent container, so vertical centering has no reference.
Using margin: auto without a fixed width or height, which only centers horizontally.
Using older methods like position: absolute with transforms but forgetting to set top and left properly.

Flexbox and Grid are modern and simpler ways to center content without hacks.

css

/* Wrong: No height on parent, vertical centering fails */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  /* height missing */
}

/* Right: Add height to parent */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* full viewport height */
}

📊

Quick Reference

Use this quick guide to center elements:

Method	CSS Properties	Notes
Flexbox	display: flex; justify-content: center; align-items: center;	Best for one or multiple items, responsive
Grid	display: grid; place-items: center;	Simpler syntax, good for single item
Absolute + Transform	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);	Legacy method, needs relative parent
Margin Auto	margin: auto;	Only horizontal centering unless height fixed

✅

Key Takeaways

Use Flexbox or Grid with center alignment properties for easy vertical and horizontal centering.

Always set a height on the parent container to enable vertical centering.

Avoid legacy hacks like absolute positioning unless necessary.

Flexbox is versatile for multiple items; Grid is simpler for single items.

Check your container’s size and display type to ensure centering works.