How To Center <div> Vertically?

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:

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: https://www.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: https://www.hongkiat.com/blog/css-tricks-vertical-align-content/

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

𝐓𝐡𝐚𝐧𝐤 𝐘𝐨𝐮 𝐅𝐨𝐫 𝐑𝐞𝐚𝐝𝐢𝐧𝐠 𝐇𝐚𝐯𝐞 𝐀 𝐆𝐨𝐨𝐝 𝐃𝐚𝐲 😀