html - 垂直文本不居中

Question

我的网站左侧/右侧有垂直文本链接，但它们并未位于页面中央。我想要左右链接垂直居中!

CSS

[class*="navigation"] .nav-previous, 
[class*="navigation"] .nav-next { 
  position:fixed;
  top: 50%; bottom: 0;
  transform: translateY(-25%);
  text-align: center;
}
[class*="navigation"] .nav-next { left: 0px; }
[class*="navigation"] .nav-previous { right: 0px;}
[class*="navigation"] .nav-previous a,
[class*="navigation"] .nav-next a {
  position: absolute;
  text-transform: uppercase;
  display: inline-block;
  color: #4d4d4d;
  white-space: nowrap;
  background-color: #fff;
  padding: 15px 15px 10px 15px;
}
[class*="navigation"] .nav-previous a { 
  right: 0;
  transform-origin: top right;
  transform:rotate(-90deg);     
}
[class*="navigation"] .nav-next a { 
  left: 0; 
  transform-origin: top left;
  transform:rotate(90deg); 
}

输出

编辑:html 是通过 Wordpress 生成的，但输出是

<nav id="nav-BN" class="post-navigation" role="navigation">
   <div class="nav-previous">
      <a rel="prev" href="http://localhost/wordpress/?p=224">
   </div>

   <div class="nav-next">
      <a rel="next" href="http://localhost/wordpress/?p=413">
   </div>
 </nav>

Answer 1

两种方式:

1. 将 translateY 和正确的 transform-origin 添加到您的转换中。查看这支笔:http://codepen.io/SamP/pen/PzWeMo

2. 您可以在您的容器上使用 flexbox。确保要与容器对齐的子元素不是绝对定位的:

.cnt{ 位置:flex;对齐元素:居中；最小高度:100vh； }