Hello and welcome to this CSS guide. In this tutorial, I'm going to show you the seven quickest ways to center your div using CSS, with pros and cons for each method. Ready? Let's check it out.

Method 1: Flex Layout

The first and most simple method is to use a flex layout. Simply add display: flex, justify-content: center for horizontal justification, and align-items: center for vertical alignment.

<div class="flex-container">
<div class="box">Centered with Flexbox</div>
</div>

.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.box {
background-color: #4caf50;
color: white;
padding: 20px;
font-size: 20px;
}

The advantage of the flex display is you don't need to specify the width and height of the div at all. For example, here's the div that only has text without any width and height. Flex layout is the quickest way to center multiple elements in a single div.

Method 2: Margin: Auto

The second method is to use margin: auto. It's a quick solution and very popular, but there are lots of limitations:

• We can only use this for elements that have a defined width.
• The element must have a block or table display and must not have a position of fixed or absolute.
• Also, we can't use it for vertical alignment.

<div class="container">
<div class="box">Centered with Margin: Auto</div>

.box {
width: 200px;
height: 100px;
margin: auto;
background-color: #2196f3;
color: white;
text-align: center;
line-height: 100px;
}

So, it's not quite flexible and should be used for certain scenarios.

Method 3: Inline Block Display

The third method is to use a combination of text-align and inline-block.
Simply add text-align: center to the parent div and set the child div's display to inline-block. This will force our div to behave like an inline element and therefore subject it to text-align: center.

<div class="container">
<div class="box">Centered with Inline Block</div>
</div>

.container {
text-align: center;
height: 100vh;
background-color: #f0f0f0;
}
.box {
display: inline-block;
background-color: #ff9800;
color: white;
padding: 20px;
font-size: 20px;
}

The difference between this method and margin: auto is we don't need the width to be specified, but still, you can't use it for vertical alignment.

Method 4: 2D Transform

The 4th method is to use the 2D transform.
First, set the element's position to absolute, then set top and left to 50%. This will move the div to the center of the screen. Then, add a translate(-50%, -50%) for both X and Y to offset the element's size.

<div class="container">
<div class="box">Centered with 2D Transform</div>
</div>

.container {
position: relative;
height: 100vh;
background-color: #f0f0f0;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #e91e63;
color: white;
padding: 20px;
font-size: 20px;
}

The div will always be at the center of the screen and will ignore all other elements. This is very useful if you want to use your div to overlay others. However, you will need to define the width and height to make this work.

Method 5: Grid Layout

CSS Grid can also be used to center elements very efficiently.

• Add display: grid to the parent container.
• Use place-items: center to center both horizontally and vertically.

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

Pros:

• No need to specify width and height.

• Works well for centering multiple elements.
  Cons:

• Requires modern browser support (though widely supported now).

Method 6: Table Display

Using display: table and display: table-cell is an older method but still works:

• Set the parent to display: table.
• Set the child to display: table-cell and vertical-align: middle.
• Use text-align: center for horizontal alignment.

.parent {
  display: table;
  width: 100%;
  height: 100%;
}
.child {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

Method 7: Position Relative + Transform

This is a variation of the absolute + transform method:

• Set the parent container to position: relative.
• Set the child to position: absolute and center it using top: 50%, left: 50%, and translate(-50%, -50%).

<div class="relative-container">
<div class="absolute-child">
Centered with Position Relative + Transform
</div>

.relative-container {
position: relative;
width: 400px;
height: 300px;
margin: 50px auto;
background-color: #f0f0f0;
border: 2px solid #ccc;
}
.absolute-child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #673ab7;
color: white;
padding: 20px;
font-size: 18px;
text-align: center;
}

This method is slightly more controlled when dealing with nested elements.

Conclusion

That's all for this tutorial. If you love this tutorial, don't forget to like and follow to support me and stay tuned for the next update.
Thanks for reading to the end, and see you next time. Bye!
Consider following my on my other social platforms!
LinkedIn | Bluesky | Medium