css实现div水平垂直居中：竖排居中，横排居中

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%);