CSS Grid - Can I align content to the right horizontally, but centered vertically?

Question

I can think of several ways to work around this, but my question is if I'm missing a way to do this natively.

I have a footer on my page. I want to display some text which is right aligned in the footer. But I also want the text center aligned vertically.

The immediate thought is to add some padding to the element, but if I decide to make the footer resizeable later that will break the design. There are some other CSS approaches that don't use native Flexgrid options.

The other idea is to put a div within a div (for example, any element) and then center the first align-content: center the first one and align-content: flex-end the interior one. Which works but is a little messy.

What I'm wondering however is if I can natively tell Flexgrid to align the content both to the right horizontally and centered vertically?

Answer 1

There is a CSS feature called Flexbox:

Here is a tutorial

Your code would look like this

.div-parent-element {

    display: flex; /* Make it flexbox */
    justify-content: flex-end; /* Align Right */
    align-items: center; /* Center Vertically */

}

The .div-parent-element is what your text is contained in