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; with justify-content: center; and align-items: center; on its container. Alternatively, use CSS Grid with place-items: center; or classic methods like margin: auto; for horizontal centering.

📐

Syntax

Here are common CSS properties used to center a div inside a container:

Flexbox: display: flex; makes the container flexible. justify-content: center; centers horizontally. align-items: center; centers vertically.
Grid: display: grid; creates a grid container. place-items: center; centers content both ways.
Margin auto: margin-left: auto; and margin-right: auto; center block elements horizontally.

css

/* Flexbox centering */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px; /* needed for vertical centering */
}

/* Grid centering */
.container-grid {
  display: grid;
  place-items: center;
  height: 200px;
}

/* Horizontal centering with margin auto */
.center-horizontal {
  width: 100px;
  margin-left: auto;
  margin-right: auto;
}

💻

Example

This example shows a red box centered horizontally and vertically inside a gray 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>Center Div Example</title>
<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    background-color: #ddd;
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>
</html>

Output

A gray rectangle 200px tall with a smaller red square perfectly centered horizontally and vertically inside it.

⚠️

Common Pitfalls

Some common mistakes when centering a div include:

Not setting a height on the container when using vertical centering with Flexbox or Grid, so vertical centering has no effect.
Using margin: auto; without specifying a width, which won't center the element.
Trying to center inline elements with block centering methods.

css

/* Wrong: no height, vertical centering won't work */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  /* height missing */
}

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

📊

Quick Reference

Summary of centering methods:

Method	Use for	Key CSS
Flexbox	Horizontal & vertical centering	`display: flex; justify-content: center; align-items: center;`
Grid	Horizontal & vertical centering	`display: grid; place-items: center;`
Margin auto	Horizontal centering only	`margin-left: auto; margin-right: auto; width: fixed;`

Method	Use for	Key CSS
Flexbox	Horizontal & vertical centering	display: flex; justify-content: center; align-items: center;
Grid	Horizontal & vertical centering	display: grid; place-items: center;
Margin auto	Horizontal centering only	margin-left: auto; margin-right: auto; width: fixed;

✅

Key Takeaways

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

CSS Grid's place-items: center is a simple alternative for centering content both ways.

Always set a height on the container when vertically centering with Flexbox or Grid.

Margin auto centers block elements horizontally but requires a fixed width.

Avoid missing container height or width as it breaks centering behavior.