How To Center <div> Vertically?

How To Center <div> Vertically?

When I am not able to center a div container...

ยท

1 min read

Table of contents

No heading

No headings in the article.

Hello๐Ÿ‘‹,
I am learning CSS past 15days now and I am working on some projects where I have to center a whole card component vertically and horizontally in the middle of a page.

I have learned from my previous project How To Center an Element horizontally, I have put the code below(This is in every tutorial you follow):

By Setting left and right margin as auto:

index-html.png

horizontal-align-using-margin-style-css.png

But, When I tried to align vertically by setting the Top & Bottom margin as auto but it did not work ๐Ÿ˜ค

Why margin auto does not work: hongkiat.com/blog/css-margin-auto this is a great article to read.

So after hustling through google searches I got to know that this is a common problem every programmer had faced in their CSS journey.

So I came to know that there are a lot of techniques out there for this problem and came across this article:
6 CSS Tricks to Align Content Vertically: hongkiat.com/blog/css-tricks-vertical-align..

I think in this article there is all possible daily occurring vertically aligned content patterns are given.

๐“๐ก๐š๐ง๐ค ๐˜๐จ๐ฎ ๐…๐จ๐ซ ๐‘๐ž๐š๐๐ข๐ง๐  ๐‡๐š๐ฏ๐ž ๐€ ๐†๐จ๐จ๐ ๐ƒ๐š๐ฒ ๐Ÿ˜€

ย