How do I center text horizontally within my grid box?

I am trying to center my text within my grid boxes by setting margin-top and margin-bottom to 50%, but everything’s getting wonky.

How do I do this properly?

How are you displaying your text inside (inline, block, flex?)? You’d have to follow the alignment procedures for that. (I think… not fully sure about this one of the top of my head).

I’m not sure what the alignment procedures are for those displays. Is there an article I can read on that? What can I search for?

I just google flex align mdn, or inline align mdn. It usually takes me to the right place. Remember, even if you’re using grid, it doesn’t mean the box contents are being displayed in grid format. You have to specify their display if you want it to behave in a specific, non-default way.

1 Like