How do i bring text in the center of each box

here is my code link: https://codepen.io/adarsh_k/pen/RYYpVG
i used ‘text-align:center;’ but it only centers it at the top of the box, i how can i bring the text in the middle of the box

thnks for help

if you have used line height , then to bring text in the center give the line height of same value.

hey i have seen your code .
give the margin to the box inside the div.

Hey, i saw your code. Using grid and want to center the content: you need to establish a parent child relationship in the case of grid.

Remove: text-align: center from your content class and padding from .content div selector
Add the below 3 lines in (.content div) selector

  • display: flex;

  • justify-content: center;

  • align-items: center;

You can also use:
display: grid; instead of display: flex;

yeah i just thought i can simply add padding, much easier. This just a small example, Iif had to add extra contentsuch as a para, then i would have to do some more twerks.