Hey! there are 2 ways as i know to center vertically. Eather you use the transform property or you make your element to a flexbox or grid and use the justify-content or align-items properties to center stuff. Google about the two displaying methods. Let me know if that helped you. Best Regards Q-bert.
Marked as helpful
@coddingeek
Posted
@QBERT18 thank a lot but can you explain transform property a bit more
@coddingeek Hi again. this is an example code to place a blue box in the center of your screen: body { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.box { width: 150px; height: 150px; background-color: blue; } BUT!!! I'am not recomending doing this at all. Its not compatible way in the modern web development. Felxbox for one dimensional cases and grid for 2 dementional is the way to go. Try to avoid using transform in large scale please. And if its necessarry, than only for small things. Best Regard Q-bert.
