-3

I was trying to vertically align an h1 tag that is on top of a picture.

I used position:relative, and top:50% and I don't understand why it didn't vertically aligned it even though I used top:50%.

So this time I added transform: translateY(-50%); and for some reason it is now vertically aligned.

Can somebody please explain to me what translateY(-50%) does?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
S. Choi
  • 3
  • 3

1 Answers1

0

First of all you need to understand the position relative. as per w3school "An element with position: relative; is positioned relative to its normal position." so percentages in top,left etc will not work. if you give it in px ie top:10px; it will take position from its current location. and for your question about translateY(); As per w3school "The translate() method moves an element from its current position" TraslateY() moves the the element vertically down, and negative value will move it opposite to top. for further reading you can check this link http://www.w3schools.com/css/css3_2dtransforms.asp

rmarif
  • 548
  • 4
  • 12