I want to place my my nav - Top - Right - Bottom - Left - css

Question

I want to place my nav in 4 different places. Top, Right, Bottom, And middle. But I cant seem to get it to work. And when i for example mean Right, it should still be in the center of top and bottom. I donät know if you understand but i don't really know how to describe it better.
#navOne {
display: block;
text-align: center;
padding-top: 1em;
}
#navTwo {
display: block;
position: relative;
float: right;
margin-top: 43vh;
transform: rotate(90deg);
}
#navThree {
display: block;
position: absolute;
text-align: center;
margin-left: 50%;
transform: translateX(-50%);
margin-top: 86vh;
}
#navFour {
display: block;
position: relative;
transform: rotate(-90deg);
float: left;
margin-top: 42vh;
margin-left: 0.5em;
}
<p id="navOne" class="navs">About me</p>
<p id="navTwo" class="navs">Portfolio</p>
<p id="navThree" class="navs">Skills</p>
<p id="navFour" class="navs">Contact</p>

Answer 1

I add the following CSS and Found that none of your link is perfectly centered! here is the code:
body {
margin: 0;
padding: 0;
}
.box {
height: 50vh;
width: 100vw;
position: absolute;
border: 1px solid red;
top: 0;
box-sizing: border-box;
}
.box.two {
height: 100vh;
width: 50vw;
position: absolute;
border: 1px solid rgb(255, 0, 64);
top: 0;
}
a {
outline: 1px solid green;
}
The image is the outcome of my code which you see. So I'm rewriting the code for you.
body {
margin: 0;
padding: 0;
}
.navs {
text-align: center;
margin: 0;
}
.navtop {
margin-top: 15px;
}
.navright {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%) rotate(90deg);
}
.navbottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-bottom: 15px;
}
.navleft {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%) rotate(-90deg);
}
/* below code is for checking every thing is perfectly centered*/
.box {
height: 50vh;
width: 100vw;
position: absolute;
border: 1px solid red;
top: 0;
box-sizing: border-box;
}
.box.two {
height: 100vh;
width: 50vw;
position: absolute;
border: 1px solid rgb(255, 0, 64);
top: 0;
}
a {
outline: 1px solid green;
}
<p id="navOne" class="navs navtop">About me</p>
<p id="navTwo" class="navs navright">Portfolio</p>
<p id="navThree" class="navs navbottom">Skills</p>
<p id="navFour" class="navs navleft">Contact</p>
<!-- below html is for testing purpose -->
<div class="box"></div>
<div class="box two "></div>