竖排文字垂直居中

先上 dom：

<div class="f">
    <p class="s">竖排文字</p>
</div>

思路

1. 使用嵌套结构，先让文字左右居中，再让文字上下居中；

两种方法左右居中，一种为父元素text-align为center，子元素设置display: inline-block
另一种方法：需知道父元素的宽度，设置子元素行高等于父元素宽度

2. 使用 css 的writing-mode属性来控制文字方向；
3. 使用letter-spacing或 行高来控制文字间距；
   css代码：

.f{
    margin: 0 auto;
    width: 60px;
    height: 100px;
    background-color: #46a0f0;
    border-radius: 3px;
    text-align: center;  // 左右居中
}
.s{
    display: inline-block;
    height: 100%;  // 子元素和父元素等高
    margin: 0;  // 去除p标签默认样式
    text-align: center;  // 上下居中
    letter-spacing: 3px;  // 文字之间的间距
    color: #fff;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: lr-tb;
    writing-mode: vertical-lr;  // 垂直由左向右排列多行
}

或

.f{
    margin: 0 auto;
    width: 60px;
    height: 100px;
    background-color: #46a0f0;
    border-radius: 3px;
}
.s{
    line-height: 100%;
    height: 100%;
    margin: 0;
    text-align: center;
    color: #fff;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: lr-tb;
    writing-mode: vertical-lr;
}

样式如图1所示：

竖排文字垂直居中