Amrin

Posted on Jan 2, 2022 • Edited on Jan 12, 2022 • Originally published at coderamrin.hashnode.dev

How to Center a div Horizontally and Vertically

#css #webdev #beginners #tutorial

Centering a div is a crucial skill for a web developer. So, today I’ll share 3 ways to center a div horizontally and vertically.

Let’s get started.

If you prefer video then check it out here:

Note: to center a div with flexbox or grid you need to add flexbox or grid to the parent of that div.

You can center a div horizontally and vertically with Flex box, with just 4 lines of code.

div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Centering a div with grid is much more easier than with flexbox.

div { 
  display: grid;
  place-items: center;
  height: 100vh; 
}

You can center a div with CSS positionning too.

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

Conclusion

That’s it for today.

If you enjoyed reading this article, I think you’ll also enjoy my newsletter where I share my articles and videos, and other useful resources

Also you can connect with me on Twitter at @coderamrin

Use min-height, instead of height

thanks for sharing Vladi

Let's not forget yet a 4th way. No need for "positioning."

.parent {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.child {
    display: inline-block;
}

thanks for sharing