transform: translateY magically perfect center
Hey, I have a question, when we apply flex box center properties using align items (or justify content if flex direction = column), our center essentially starts from the top of first element. As a result, we dont get perfectly centered elements. But, the moment we put translateY(-50%), its perfectly centered, I would appreciate a good explanation on what exactly is this percentage about? that -50% puts it in center:
https://codepen.io/latuza/pen/PwPyPXJ (uncomment line 12 to see what im saying)
2 Replies