我想放置我的导航-顶部-右侧-底部-左侧

Question

我想将导航放置在4个不同的位置。顶部，右侧，底部和中间。但我似乎无法使其正常工作。例如，当我指的是对时，它仍应位于顶部和底部的中心。我不知道您是否理解，但我真的不知道如何更好地描述它。

#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"><a href="about.html">About me</a></p>
<p id="navTwo" class="navs"><a href="portfolio.html">Portfolio</a></p>
<p id="navThree" class="navs"><a href="skills.html">Skills</a></p>
<p id="navFour" class="navs"><a href="contact.html">Contact</a></p>

Answer 1

我添加了以下CSS并发现您的链接没有一个完全居中！这是代码：

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

图像是您看到的我的代码的结果。因此，我正在为您重写代码。

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"><a href="about.html">About me</a></p>
<p id="navTwo" class="navs navright"><a href="portfolio.html">Portfolio</a></p>
<p id="navThree" class="navs navbottom"><a href="skills.html">Skills</a></p>
<p id="navFour" class="navs navleft"><a href="contact.html">Contact</a></p>

<!-- below html is for testing purpose -->
<div class="box"></div>
<div class="box two "></div>