微信内置浏览器中文竖排居中

实现中文竖排通常情况下直接设置 writing-mode: vertical-rl; 即可，顶多加浏览器前缀，如下：

-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;

在微信内置的浏览器下预览，中文是竖排显示了，可是文字方向却不对了，如图

出现这种情况可能是微信内置的浏览器默认 text-orientation 属性跟英文显示一样，使用了 sideways，只要改为

text-orientation: upright;

即可。此时，微信内置浏览器和其它浏览器显示的中文都一样竖排了，不过居中却还有差异，这里使用 flex 和 padding 做了下兼容，具体如下：

-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
width:10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding:5px 2px 5px 0;

text-orientation 可取值

• mixed——将水平脚本的字符旋转90°。自然地表现垂直脚本的特征。默认值。

• upright——自然地表现（竖直）水平脚本的字符以及垂直脚本的字形。请注意，此关键字会使所有字符被视为从左到右：使用的值direction被强制为ltr。

• sideways——使字符按照水平放置的方式布置，但如果writing-mode是vertical-rl，则整行再向右旋转90°；如果writing-mode是vertical-lr，则整行向左旋转90°。为了兼容性而保留了sideways的别名sideways-right。

• use-glyph-orientation——在SVG元素上，这个关键字会导致使用过时的SVG属性值glyph-orientation-vertical和glyph-orientation-horizontal

参考

https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation