jquery - 在视口(viewport)中垂直居中旋转的 div(窗口高度)

Question

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

我已将它们旋转 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>