mui开发

如何用flex实现文字在图片上面且剧中？

让文字所在的div的position变成absolute，两个div就不会互相影响了。
这里水平垂直方向居中用到了flex定位

html部分：

<div class="content-item flex jc-center al-cneter bg-img margin-bottom-sm">
                
                    <img src="../images/discovery_1.jpg" class="bg-img">
                
                <div class="text">
                    南浔VR实景
                </div>
            </div>

css部分：

.text{
            font-size: 1.5625rem;
            color: rgba(255,255,255,0.75);
            font-weight: bold;
            position: absolute;
            /* 如何让文字居中显示在图片上*/
        }

效果：

image.png