Pls, help. I want to Align Two texts vertically, on different lines

I want to align two texts (h1 and p) vertically and horizontally in d middle, both two texts on different lines, p below h1.

This is the html codes

<section id="welcome-section">

<h1>Hey, I'm Grace</h1>

<p>a web designer</p>

</section>

This is css below

:root{--viewport-color:#ff33;}
#navbar{width:100%; background-color:red; height:30px;top:0;left:0;position:fixed;}

ul{float:right;border-color:pink;height:70%; margin:auto;}

li{list-style-type:none;display:inline; padding:10px; border-color:blue;}

*{border:2px solid black;}

a{text-decoration:none;border-color:white;}

#welcome-section{width:100%; height:100vh;background-color:var(--viewport-color); text-align:center;display:flex; align-items:center;}