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