I am confused about the my-auto

here is my Codepen link:

I want to put the div #quote-div at the center of the page, so I set “mx-auto my-auto”

but the result is the picture:

the div is at the top of the page, why “my-auto” is invalid?

Please give me some help!Thanks a lot!

you want to add a margin to the top of your div. Inside your CSS selector for the quote-div, put :

    background-color: white;
    margin-top : 20%;

Read more about it here: