Centering the text with vw and vh units - html

Question

I want to center the text (namely h1) both vertically and horizontally using vh and vw units only.
My HTML body looks like this,
<section class="centered_text">
<h1>Centered text.</h1>
</section>
My simple css (scss) looks like this,
* {
margin: 0;
padding: 0;
}
.centered_text {
margin: 50vh 50vw;
}
The problem is that the text goes more to the right side of a screen. I figured out that when I set the h1 width to the fixed one and subtract half of that width from the margin with the calc function, it seems like it's working, but I don't really know why. The code is this,
* {
margin: 0;
padding: 0;
}
.centered_text {
margin: 50vh calc(50vw - 75px);
h1 {
width: 150px;
}
}
My two questions are,
Why does it work?
How to do it otherwise, in a more convenient way (EDIT: but still using the vh and vw units)?
Thanks in advance.

Answer 1

It works because the position in css is the top-left position of the box where your text is in. 50vw is exactly half the view-width, so the text starts in the middle (and is not centered), removing half the width of the text fixes that.
For centering horizontally I usually use:
css:
.centered_text {
margin-left:auto;
margin-right:auto;
h1 {
width: 150px;
}
}

Answer 2

50vw/50vh is exactly half of the view area. The child element placed at that coordinate starts at it's top left corner, so if you subtract half of it's width, it gets centered.
If a parent container has display: flex;, you can center it's child element with simple margin: auto:
section
{
border: 1px solid red;
text-align: center; /* center wrapped text */
display: flex;
}
h1
{
margin: auto; /* center element */
}
.centered_text
{
width: 100vw;
height: 100vh;
}
html,body
{
height: 100vh; /* set height so we can use % values */
}
.containerBox
{
width: 60%; /* 60% of body width (100vw) */
height: 60%;
}
.container
{
width: 80%; /* 80% of parent width (60% of 100vw) */
height: 80%;
}
<div class="containerBox">
<section class="container">
<h1>Centered text in 80% of 60% box</h1>
</section>
</div>
<section class="centered_text">
<h1>Centered text in 100vh box</h1>
</section>