在视口中垂直居中旋转div（窗口高度）

Question

我有两个fixed div，页面两侧各有一个。

我将它们旋转了90度并设法让它们到达两侧。

但是我无法将它们带到垂直居中。

此外，我必须为div定义width以使文字保持在一行，尽管我没有设定宽度，因为我无法控制文字内容..

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>