Keep Text Centered when resizing - html

Question

So I have looked at other questions like this, yet none have solved my problem. What I want to be able to do is resize the window of the browser, yet keep the text in the centre of the window.
HTML:
<div id=inside>
Navjeeven Mann
</div>
CSS:
#inside {
position:relative;
width: 100%;
height: 100%;
font-size: 60px;
text-align: center;
color: black;
top:50%;
left:50%;
}
What it looks like now

Answer 1

To keep it centred horizontally, remove the top:50%;left:50%;
#inside {
position:relative;
width: 100%;
height: 100%;
font-size: 60px;
text-align: center;
color: black;
}
<div id="inside">
Navjeeven Mann
</div>
To center it horizontally and vertically, flex really does the job well, unless you have to support older browsers.
html, body {
margin: 0;
}
#inside {
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
font-size: 60px;
}
<div id="inside">
Navjeeven Mann
</div>

Answer 2

Looks like you want the text vertically and horizontally centered inside a div. I would first wrap your text inside a p tag. Then changeup the css a bit so your code will look like this:
html, body {
margin: 0;
}
#inside {
position: relative;
width: 100%;
height: 300px; /* change this to your liking */
border: 1px solid #000; /* to show size of div */
}
#inside p {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
margin: auto;
font-size: 60px;
text-align: center;
color: black;
display: inline-block;
}
<div id="inside">
<p>Navjeeven Mann</p>
</div>
This should work across all devices