How to center the elements with CSS ?

Question

Share the different ways to center the elements in html5 and CSS3.
let's see you will do it best by using easy technique. :)

Answer 1

hmm smart..
that's pretty easy but i think text-align property only works for x-axis. what about y-axis??
anyway I appreciate your answer .thanx :)

Answer 2

ahh..
wait a minute.we are talking about css and html right ?
what i mean bt y-axis is .if we have an div with height of 100px(for example ) and we want to place an h1 tag at exactly 50px from top?
solution:
h1{
margin-top: 50px ;
}

But what if we have an div element who's height is keep on changing on a document by certain actions . then what ?
solution :
h1{
position : absolute;
top:50%;
transform : translateY(-50%);
}

this is how it can be done :)
if you like our answer follow us,it will just take a second. ;)

Answer 3

Different ways... I know four ways to do it
• <center> (deprecated)
• text-align: center (recommended if you want to center text)
• margin:auto
• display:flex; align-items:center
• position: absolute; left:50%; right: 50% (not recommended)