How to vertically center text inside a div with CSS Flexbox? [duplicate]

I'm trying to vertically center text inside a div using CSS Flexbox, but I'm not getting the desired result. The text should be perfectly centered both horizontally and vertically within the div, regardless of the div's size.

Here is the HTML and CSS code I'm currently using:

.container {  display: flex;  justify-content: center; /* Center horizontally */  align-items: center;    /* Center vertically */  height: 300px;          /* Example height */  border: 1px solid black;}

<div class="container"><p>This text should be centered</p></div>