使用固定定位旋转链接并在页面上垂直居中

Question

我已经在列表中旋转了一些链接。现在我需要它们在页面上垂直居中并具有固定位置。

这就是我想要的：

以下是我的尝试，但我卡住了。如果链接在ul内居中，则在旋转之前ul的宽度为100％。然而，一旦旋转，其高度就是它在居中之前的宽度，这不是页面的100％。

我可以使用javascript来查找窗口高度并将值与CSS应用于ul的宽度，但我想知道是否只有CSS解决方案？

http://jsfiddle.net/X3Nf9/5/

<div>
<ul>
    <li>
        <a href="#">Link 1</a>
    </li>
     <li>
        <a href="#">Link 2</a>
    </li>
     <li>
        <a href="#">Link 3</a>
    </li>
     <li>
        <a href="#">Link 4</a>
    </li>
</ul>
</div>

li, a {
      display: inline-block;
}
ul {
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;

     -ms-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    -webkit-transform: rotate(-90deg); 
    transform: rotate(-90deg); 

    padding: 0;
    margin: 0;
    text-align: center;
}
div {
    position: fixed;
    bottom: 0;
}
}

Answer 1

http://jsfiddle.net/X3Nf9/8/

div {
    position: fixed;
    width:100%;
    top:50%;
    margin-top:50vw;
}

您可能想要检查浏览器兼容性，某些较旧的浏览器可能不喜欢vw单元。由于您正在使用转换，因此您已经将自己限制在较新的浏览器中，但我不确定是否存在支持vw单元的确切重叠。