CssHow-ToBeginner · 3 min read

How to Center Vertically in CSS: Simple Methods Explained

To center content vertically in CSS, use display: flex with align-items: center on the container. Alternatively, use CSS Grid with place-items: center or set the element's position with top: 50% and transform it with translateY(-50%).

📐

Syntax

Flexbox method: Set the container's display to flex and use align-items: center to center children vertically.

Grid method: Use display: grid and place-items: center to center content both vertically and horizontally.

Position method: Use position: relative on the container and position: absolute on the child with top: 50% and transform: translateY(-50%) to center vertically.

css

/* Flexbox vertical center syntax */
.container {
  display: flex;
  align-items: center; /* centers vertically */
  height: 200px; /* needed to see vertical centering */
}

/* Grid vertical center syntax */
.container {
  display: grid;
  place-items: center; /* centers vertically and horizontally */
  height: 200px;
}

/* Position vertical center syntax */
.container {
  position: relative;
  height: 200px;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

💻

Example

This example shows how to center a box vertically inside a container using Flexbox. The box stays in the middle vertically regardless of container height.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Vertical Centering with Flexbox</title>
<style>
  .container {
    display: flex;
    align-items: center;
    justify-content: center; /* centers horizontally too */
    height: 300px;
    border: 2px solid #4a90e2;
    background-color: #e0f0ff;
  }
  .box {
    width: 150px;
    height: 100px;
    background-color: #4a90e2;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border-radius: 8px;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="box">Centered Box</div>
  </div>
</body>
</html>

Output

A blue rectangular box with white text 'Centered Box' is perfectly centered vertically and horizontally inside a light blue container with a border.

⚠️

Common Pitfalls

Not setting a fixed or relative height on the container can prevent vertical centering from working.
Using margin: auto only centers horizontally, not vertically.
For the position method, forgetting transform: translateY(-50%) causes the element to be offset below center.
Using line-height for vertical centering only works for single-line text, not blocks or multiple elements.

css

/* Wrong: margin auto does not center vertically */
.container {
  height: 200px;
}
.child {
  margin: auto; /* centers horizontally only */
  width: 100px;
  height: 50px;
  background: coral;
}

/* Right: flexbox vertical centering */
.container {
  display: flex;
  align-items: center;
  height: 200px;
}
.child {
  width: 100px;
  height: 50px;
  background: coral;
}

📊

Quick Reference

Use these quick tips to center vertically:

Flexbox: display: flex; align-items: center;
Grid: display: grid; place-items: center;
Position: position: absolute; top: 50%; transform: translateY(-50%);
Always set container height for vertical centering to work.
Use justify-content with flexbox to center horizontally too.

✅

Key Takeaways

Use Flexbox with align-items: center to easily center vertically inside a container.

CSS Grid's place-items: center centers content both vertically and horizontally.

Position with top 50% and translateY(-50%) works but needs relative/absolute positioning.

Always set a container height for vertical centering to take effect.

Avoid margin auto for vertical centering; it only centers horizontally.