Getting a div in a flexbox to center both horizontally and vertically while taking up the remaining space

Question

I can get it to center vertically or horizontally but not both at the same time. This is the css code I have so far:

.my-flex{
display: flex;
height: 100%;
width: 100%
}

//other pieces of the the flexbox that i have before it that aren't relevent

.last-element{
flex-grow: 1 0 auto;
align-self: center;
justify-self:center;
}

I also tried having the my-flex also be jusify-content center and flex-start as well as align-items

Answer 1

.my-flex{
display: flex;
height: 100%;
width: 100%
}

//other pieces of the the flexbox that i have before it that aren't relevent

.last-element{
flex-grow: 1;
align-self: center;
justify-self:center;
text-align: center
}

This is what I got to work!

Answer 2

if <div class="my-flex"> is the parent div, then

.my-flex{
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
}