先上 dom：
<div class="f">
<p class="s">竖排文字</p>
</div>
思路
- 使用嵌套结构，先让文字左右居中，再让文字上下居中；
两种方法左右居中，一种为父元素
text-align为center，子元素设置display: inline-block
另一种方法：需知道父元素的宽度，设置子元素行高等于父元素宽度
- 使用 css 的
writing-mode属性来控制文字方向； - 使用
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所示：
竖排文字垂直居中
