视口中垂直居中旋转的div(窗口高度)

Question

我有两个fixeddiv，一个在页面两侧。

我把它们旋转了90度，并设法把它们移到了一边。

但是，我无法使它们垂直居中。

此外，我必须为div定义width，以使文本保持在一行上，尽管我不希望有一个设置的宽度，因为我无法控制文本内容。。

.nav-previous, .nav-next { 
  position:fixed;
  top: 0; bottom: 0;
}
.nav-previous { left: 0px; }
.nav-next { right: 0px; }
.nav-previous a, .nav-next a {
  display: inline-block;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  width: 300px;
  font-size: 1.25em; 
  color: #383838;
  margin: 0; padding: 20px;
}
.nav-previous a { 
  right: 0;
  transform-origin: top right;
  transform:rotate(-90deg);      
}
.nav-next a { 
  left: 0; 
  transform-origin: top left;
  transform:rotate(90deg); 
}

<div class="navigation">
  <div class="nav-previous"><a href="#">previous</a></div>
  <div class="nav-next"><a href="#">next</a></div>
</div>

jsFiddle：https://jsfiddle.net/azizn/3hq6xgL4/

Answer 1

这是怎么回事-我用translate将文本居中：

/* this vertically centres the containers */
.navigation .nav-previous, 
.navigation .nav-next { 
  display:inline-block;
  position:fixed;
  top: 50%;
  transform: translateY(-50%);
}
/*this moves the links onto the screen (after the translating and rotating is done*/
.navigation .nav-previous { left: 20px; }
.navigation .nav-next { right: 20px; }
.navigation .nav-previous a,
.navigation .nav-next a {
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1.25em; 
  color: #383838;
  margin: 0; 
  padding: 20px;
  transform-origin: center;      
}
.navigation .nav-previous a{
  transform: translate(-50%, 0) rotate(90deg); /* move left 50% before rotating*/
}
.navigation .nav-next a {
  transform: translate(50%, 0) rotate(90deg); /* move right 50% before rotating*/
}
/* styles below to show it is centered */
html,
body {height:100%; padding:0; margin:0;}
body:after {content:''; height:50%; background:blue; display:block;}

<div class="navigation">
  <div class="nav-previous"><a href="3">previous</a></div>
  <div class="nav-next"><a href="#">next</a></div>
</div>