vertical text not centering

I have text links vertically on the left/right of my website but they aren't centering on the page. I want the right and left link to vertically center!

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

Output

EDIT: html is generated through Wordpress but the output is

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