How to center div in css

CssHow-ToBeginner · 3 min read

How to Center a Div in CSS: Simple and Effective Methods

To center a div horizontally and vertically in CSS, use display: flex on the parent with justify-content: center and align-items: center. Alternatively, use CSS Grid with place-items: center or set the div to position: absolute and use top, left, and transform for centering.

📐

Syntax

Here are common CSS patterns to center a div inside its parent:

Flexbox: Use display: flex on the parent, then justify-content: center to center horizontally and align-items: center to center vertically.
Grid: Use display: grid on the parent with place-items: center to center both ways.
Absolute Positioning: Set the child div to position: absolute, then use top: 50%, left: 50%, and transform: translate(-50%, -50%) to center it.

css

/* Flexbox centering syntax */
.parent {
  display: flex;
  justify-content: center; /* centers horizontally */
  align-items: center;    /* centers vertically */
  height: 200px;          /* needed for vertical centering */
}
.child {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

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

/* Absolute positioning centering syntax */
.parent-abs {
  position: relative;
  height: 200px;
}
.child-abs {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: lightcoral;
}

💻

Example

This example shows a parent div using Flexbox to center a child div horizontally and vertically. The child is a blue square centered inside a gray box.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Center Div Example</title>
<style>
  .parent {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    background-color: #ddd;
    border: 2px solid #999;
  }
  .child {
    width: 100px;
    height: 100px;
    background-color: #4a90e2;
  }
</style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

Output

A gray rectangular box 200px tall with a smaller bright blue square perfectly centered horizontally and vertically inside it.

⚠️

Common Pitfalls

Common mistakes when centering a div include:

Not setting a height on the parent container, so vertical centering with Flexbox or Grid doesn't work.
Using margin: auto only centers horizontally if the div has a fixed width.
For absolute positioning, forgetting to set position: relative on the parent causes unexpected placement.
Using older methods like text-align: center which only centers inline content, not block divs.

Example of wrong and right way:

css

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

/* Right: Height set for vertical centering */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

📊

Quick Reference

Summary tips for centering a div in CSS:

Use Flexbox for easy horizontal and vertical centering with display: flex, justify-content: center, and align-items: center.
CSS Grid's place-items: center is a concise alternative.
Absolute positioning with transform: translate(-50%, -50%) works well for overlay or fixed-size elements.
Always ensure the parent has a defined height for vertical centering.
Avoid legacy methods like margin: auto without width or text-align for block elements.

✅

Key Takeaways

Use Flexbox with justify-content and align-items set to center for easy centering.

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

Set a height on the parent container to enable vertical centering.

Absolute positioning with transform can center fixed-size elements precisely.

Avoid outdated methods like text-align or margin auto without width for centering divs.