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 {&nbsp; &nbsp;position: relative;&nbsp; &nbsp;overflow: hidden;&nbsp; &nbsp;width: 100px;&nbsp; &nbsp;height: 100px;&nbsp; &nbsp;text-align: center;&nbsp;&nbsp; &nbsp;line-height: 100px;}