6 Ways to Center a Div Perfectly Every Time

Centering a div both horizontally and vertically in CSS is a common task, and there are multiple techniques to achieve this, depending on your use case and the layout context. Below are the different methods:

1. Using Flexbox

Flexbox provides one of the simplest ways to center elements both horizontally and vertically.

HTML:

<div class="container">
  <div class="center-div">Centered Div</div>
</div>

CSS:

.container {
  display: flex;
  justify-content: center; /* Horizontal centering */
  align-items: center;     /* Vertical centering */
  height: 100vh;           /* Full viewport height */
}

.center-div {
  width: 200px;
  height: 100px;
  background-color: lightcoral;
}

• justify-content: center centers the div horizontally.
• align-items: center centers the div vertically.
• height: 100vh makes the container full height of the viewport.

2. Using Grid

CSS Grid is another modern approach for centering content.

.container {
  display: grid;
  place-items: center;  /* Centers both horizontally and vertically */
  height: 100vh;        /* Full viewport height */
}

.center-div {
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

• place-items: center is a shorthand for justify-items: center and align-items: center, centering the div in both directions.

3. Using Positioning (absolute and transform)

Positioning can also be used to center an element, particularly when the container has a relative position.

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

.center-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Moves the div back by 50% of its own width and height */
  width: 200px;
  height: 100px;
  background-color: lightgreen;
}

• top: 50% and left: 50% move the div‘s top-left corner to the center of the container.
• transform: translate(-50%, -50%) adjusts the position by shifting the element back by half its width and height to achieve centering.

4. Using margin: auto with Absolute Positioning

You can also use the margin: auto technique in conjunction with absolute positioning.

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

.center-div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 200px;
  height: 100px;
  background-color: lightgoldenrodyellow;
}

• By setting top: 0, bottom: 0, left: 0, and right: 0, the div is “squeezed” into the center with margin: auto doing the horizontal and vertical centering.

5. Using table-cell Technique

The table-cell technique is an older method that can still be useful.

.container {
  display: table;
  height: 100vh;
  width: 100%;
}

.center-div {
  display: table-cell;
  vertical-align: middle;  /* Centers vertically */
  text-align: center;      /* Centers horizontally */
  width: 200px;
  height: 100px;
  background-color: lightpink;
}

• display: table and display: table-cell simulate table behavior.
• vertical-align: middle vertically centers the content.

6. Using Line-height for Single Line Text

If you’re only centering text within a div with a fixed height, line-height can be used for vertical centering.

.center-div {
  width: 200px;
  height: 100px;
  line-height: 100px;  /* Matches the height */
  text-align: center;  /* Horizontal centering */
  background-color: lightsalmon;
}

• line-height vertically aligns the text if it’s a single line of text.
• text-align: center ensures horizontal centering.

Conclusion

• Flexbox and CSS Grid are the most modern and flexible solutions, working well for a wide range of layouts.
• Positioning with transform is also a reliable method for centering, especially when working with non-flex or non-grid layouts.
• margin: auto is handy when you have fixed dimensions, and table-cell works in older environments.