Css 在flexbox中设置一个div，使其水平和垂直居中，同时占用剩余空间

我可以使它垂直或水平居中，但不能同时使两者居中。这是我到目前为止的css代码：

.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;
}

我还尝试让我的flex也成为jusify资源中心和flex开始以及对齐项目

.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
}

这就是我要做的

如果

是父div，则

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

---

请将HTML代码和CSS放入代码片段中