Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Tim Strand
Tim Strand
22,458 Points
Posted by Tim Strand
Tim Strand
22,458 Points

vertically centering a pseudo element

This is an issue i was dealing with and i found a very slick solution that did work for me via stack overlow. https://stackoverflow.com/questions/14523927/vertically-centering-content-of-before-after-pseudo-elements Specifically 2 pieces of fcalderan's answer worked for me: top : 50%; transform: translateY(-50%); what i dont understand is why this works. it seems like this should move it down by 5px then back by 5px but in reality it seems to move it down 10px and back 7px thus perfectly centering the pseudo when the line gets taller on a narrower screen with the label wrapping. its an older question on stack so i thought i would ask for clarification here. Thanks for any thoughts.

Mister Moody
Mister Moody
48,333 Points

Good Question Tim. I actually do not understand the 'transform: translateY(-#) either so I want to follow this thread.

I think a possible explanation has to do with the positioning of the element as I have centered elements using other methods.

Tim Strand
Tim Strand
22,458 Points
Tim Strand
Tim Strand
22,458 Points

Dwelling on this further i am assuming this has to do with the fact that the top: 50% pushes it down from the top. Then using the translateY(-50%) moves it back up 50% from the center of the el. so the "difference" is half the height of the el which is why it works to center the el vertically inside its parent.

1 Answer

Steven Parker
Steven Parker
231,007 Points
Steven Parker
Steven Parker
231,007 Points

It sounds like you have this mostly figured out already, but just to restate how it works:

The "top: 50%" places the element halfway down the container. This means the top of the element will start at the halfway point. The "50%" here is referring to the height of the parent element.

Then the "translate: transformY(-50%)" shifts it up to make it actually centered. This time the "50%" is referring to to the height of the element itself.

Tim Strand
Tim Strand
22,458 Points
Tim Strand
Tim Strand
22,458 Points

Thanks for the response. through trial and error i was starting to grasp this. It helps to have my assumption reinforced.