Best ways to center objects in CSS (Horizontally and Vertically )

In this article, I'm going to show you how you can center your objects horizontally and vertically in CSS in three different ways.

Number one:

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}

Number two:

This way is not supported by IE

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

Number three:

.parent {
  position: relative;
}
.child {
  position: absolute;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
}

Number four:

Mentioned by @mrdanielschwarz

.parent {
  display: flex or grid;
  height: 100vh;
}
.child {
  margin: auto;
}

Which way you prefer and do you know other ways?

Comments

[AMANKANOJIYA]

which one is more efficient to the web and can help me making responsive
if any suggestion pls reply

[Mehdi Aoussiad]

I recommend Flexbox, it's much easier.

[AMANKANOJIYA]

so, sir, it will help me in making the website responsive ??

[Mehdi Aoussiad]

Yeah of course it helps. Try this: w3schools.com/csS/css3_flexbox.asp

[AMANKANOJIYA]

Thank you sir

[Amir Jafari]

Flex and Grid both are great

[AMANKANOJIYA]

thank you sir

[Roy Honders]

margin: 0 auto;

[Amir Jafari]

Thanks Roy,
But it only works for centering items horizontally

[Zeke-D]

Im recently loving grid because it gives you so much more control over responsive positioning.

[Amir Jafari]

Thanks Danial,
But it only works for centering items horizontally

[AMANKANOJIYA]

sir, I tried this margin: auto and it centers the element

[Amir Jafari]

Great! if you don't mind I add it to this post... is it ok?

[AMANKANOJIYA]

yes, Sir, it Works

[Tahmas]

I like No 3️⃣ 👍🏽

[Leena Iren]

Thanks for sharing!

[Amir Jafari]

My pleasure :)

[Amir Jafari]

It's my pleasure :)