[Vuejs]-Text in paragraph is only vertically centered in flexbox when omitting it's <p> tag, what's the reason behind it?

It IS actually centering the p tag. Like other’s has pointed out. The p tag has a default bottom margin, so it just makes it look as if it’s not centered vertically.

See below image, where the orange highlight is actually the bottom margin of the p tag.
Notice how it’s actually vertically centered.

So, you can fix this by either:

• Remove the p tag altogether like you said
• Use div tag instead, which doesn’t have a margin
• Just set the style of the p tag to have margin-bottom: 0