html⽂字竖排垂直居中显⽰,CSS⽂字竖排效果且垂直居中⽔平
居中
偶尔⽹页中会出现竖排⽂字的排版需求，经常伴随着重直居中、⽔平居中的要求。这两天试了好多办法，最后打到⼀个两个元素嵌套来实现的⽅法，似乎有点复杂，但没有想到简单的办法。先看⼀下效果(仅在chrome浏览器中调试过)。
代码如下，很简单。
值班情况显⽰
.cell span{
-webkit-writing-mode: vertical-r;
writing-mode: vertical-rl;
css设置文字垂直居中font-size:80px;
font-family:⿊体,simhei,Arial;
height:4.5em;
line-height:1.2em;
word-spacing:1.5em;
letter-spacing:0.3em;
word-break:break-all;
}
.cell{
display:table-cell;
width:2.8em;
height:4.5em;
text-align:center;
vertical-align:middle;
float:left;
border:3px solid gray;
background-color:#dce6f2;
}
张三丰
张⽆忌赵　敏
⼩　昭