How to center Div element in CSS?

By Panta on 2025-03-28 | 466 words 3 minutes read | Tags: CSS

Centering elements in CSS is a common task, and there are multiple ways to achieve it depending on the layout and desired behavior. In this guide, we'll cover different techniques to center a <div> both horizontally and vertically.

Basic HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Centering</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="element">
      Cenetered
    </div>
  </div>
</body>
</html>

info

The .element inside .container is what we’ll be centering using different CSS techniques.

1. Centering with CSS Flexbox

CSS Flexbox provides an easy way to center an element both horizontally and vertically.

CSS Styling

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

Explanation

justify-content: center; centers the element horizontally.

align-items: center; centers the element vertically.

Flexbox example

2. Centering with CSS Grid

CSS Grid also allows easy centering with fewer properties.

CSS Styling

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

Explanation

place-items: center; centers items in each grid cell, both vertically and horizontally. It is a shorthand property for align-items: center; and justify-items: center; in one line.

Or using place-content property:

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

Explanation

place-content: center; centers the entire grid within the container vertically and horizontally. It is shorthand property for align-content: center; and justify-content: center;.

Grid example

3. Centering with Positioning

Using position: absolute allows precise centering.

Styling

.container {
  position: relative;
  height: 100vh;
}

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

Explanation

top: 50%; left: 50%; moves the element to the center.

transform: translate(-50%, -50%); corrects positioning.

info

Requires .container to be relative so .element is positioned relative to it.

Positioning example

4. Centering with Margin Auto (Horizontal Only)

For simple horizontal centering, you can use margin: auto or margin-inline: auto.

.element {
  width: fit-content;
  margin-inline: auto;
}

Explanation

margin-inline: auto; centers the element horizontally within the container, same as margin: 0 auto;.

info

Only works when a width is set.

Margin example

5. Centering with text-align: center; (For Inline Elements)

If you’re centering inline elements like text, use text-align: center; property.

Styling

.container {
  text-align: center;
}

Explanation

Works for inline elements like <span>, <a>, and <img>.

Doesn’t work for block elements like <div> unless you set display: inline-block;.

text-align example

Conclusion

Each method has its use cases:

Flexbox and Grid are best for responsive layouts.
Margin auto is simple but limited to horizontal centering.
Positioning works well for absolute placement.
Text-align works best for inline elements.

Choose the right approach based on your layout needs!

Add new comment