css如何让遮罩层的文字居中呀，如何改变遮罩层的出现方式改为从四周出现？

Question

<div class="sw_mask" data-text="教育行业">                    <img  src="/ehouse/img/service/research_1.jpg" class="second_img">                    </div>.sw_mask {    position: relative;    overflow: hidden;}.sw_mask:after {    position: absolute;    left: 0;    top: 0;    display: block;    width: 100%;    height: 100%;    background-color: rgba(0, 0, 0, 0.5);    content: attr(data-text);    transition: all 1s ease;    transform: translateY(-100%);    color: #FFF;}.sw_mask:hover:after {    transform: translateY(0);}

Answer 1

文字水平居中text-align: center;，垂直居中line-height: 盒子高度;

.sw_mask {

   position: relative;

   overflow: hidden;

   width: 100px;

   height: 100px;

   text-align: center; 

   line-height: 100px;

}