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