css - 以固定位置旋转链接并在页面上垂直居中

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 单元的确切重叠。