write-mode实现文字竖排并居中
参考：css实现文字纵向排版并且水平垂直居中
<div class="title-div">实时故障信息</div>
.title-div{height: 100%;width:70px;font-size: 20px;writing-mode: vertical-lr; /*从左向右 从右向左是 writing-mode: vertical-rl;*/writing-mode: tb-rl; /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/text-align: center;display: flex;flex-direction: column;-webkit-display:flex;justify-content: center;border:1px solid black;background-color: red;}
div文字横排居中
<div class="info-div"><div class="no-info-tip" v-if="noFaultFlag">全网运行良好，无故障</div><div class="fault-info-item" v-for="item in faultData">......</div></div>
.info-div{height: 100%;width:calc(100% - 50px);margin-left:10px ;border:1px solid black;.no-info-tip{position:relative;top:50%;left:50%;transform: translate(-50%,-50%);text-align: center;}}
这里.no-info-tip的position:relative；而我之前看到的一个视频写的是absolute，当我写absolute时，文字就飘走了，看不见。补充一下absolute说明：找出定位元素父元素链上的所有父元素，由近到远哪个元素不是默认定位（即static定位）的，那么就相对于它进行定位。定位元素会释放原来所占的位置，其他元素会补充进来，好似float属性让其漂浮起来一样。当父元素链上所有父元素都是默认定位，那么absolute定位就是相对于body元素的，效果和fixed定位差不多。
其他方法：
我在CSS中4种快捷居中DIV的方法看到的4种方法：
Flex layout：
在父容器内添加以下样式:
display: flex;
justify-content: center;
align-items: center;Margin auto：
在子容器内添加以下样式:
margin: 0 auto;Text-align和Inline-block：
在父容器内添加以下样式:
text-align: center;
在子容器内添加以下样式:
display: inline-block;2D Transform
在子容器内添加以下样式:
position: absolute; //我用的relative
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
