竖排文字垂直居中问题

css样式

Paste_Image.png

html页面结构

Paste_Image.png
我想要的效果 Paste_Image.png

详细解释：
写页面需要文字竖排垂直居中效果，我脑袋里首先想到的是writing-mode，就是控制文本书写方向的，你可能想到另一个属性direction，但它比direction更加强大，writing-mode出来的很早，从ie5.5就开始支持了（没想到吧），看看他的支持情况：

Paste_Image.png

看着各大主流浏览器都可以支持，但是为什么我没有用呢？其实我最开始用的就是这种方式，但后来发现国内各大浏览器不支持writing-mode（尴尬，被ie撇下了）。
最后只能另辟蹊径，想想文字垂直居中靠什么属性？vertical-align: middle 对吧，好的，自然也就联系到了可爱的 inline-block。vertical-align的对齐是需要有参照物的，那么 li 容器通过 before伪元素 生成一个高度 100% 的「备胎」，他的高度和容器的高度是一致的，相对于「备胎」垂直居中，在视觉上表现出来也就是相对于容器垂直居中了。因为我需要单行竖直文本所以元素宽度只留够一个字，这样效果就实现了。

借鉴于多行文本垂直居中：

Paste_Image.png