设置div中的内容水平垂直居中以及div背景透明，文字不透明样式。

最新推荐文章于 2022-06-30 22:12:28 发布

may_walkaway

最新推荐文章于 2022-06-30 22:12:28 发布

阅读量383

点赞数 2

分类专栏： css学习文章标签： css

本文链接：https://blog.csdn.net/sinat_27535209/article/details/100972778

版权

css学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

dom内容：

<div v-if="isclick" class="test_two_box1">
 <span>该网点尚未接通视频监控</span>
</div>

样式内容：

.test_two_box1{
   position: fixed;
   bottom: 0;
   left: 0;
   z-index: 99999;
   width: 300px;
   height: 150px;
   text-align: center;
   line-height: 150px;
   background-color:rgba(0,0,0,0.2);
   border: 1px solid white;
 }
 .test_two_box1 span{
   font-size: 20px;
   color: white;
 }

设置div中的内容水平垂直居中的样式代码为：text-align: center;line-height: 150px; text-align是设置内容水平居中的，当内容的 line-height 与div的高度相等时就会垂直居中。
设置div背景透明，文字不透明样式代码为：background-color:rgba(0,0,0,0.2);color: white; 前者设置背景透明，后者设置文字不透明。

最终效果如下：在这里插入图片描述