最近工作中在做那个可视化大屏，图中用到了大量的装饰图片，下面看一下文字怎么在图片中水平居中。
这个方法比较好用，其他的方法嵌入太多可能不是特别好使，尤其嵌入到多个框架中。
html
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>测试文字在图片上展示</title><style type="text/css">.imgGroup{width: 500px;height: 370px;position: relative;margin: auto;/* text-align: center; */}.text{ position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: red;}.imgGroup img{width: 100%;height: 100%;} </style></head><body><div class="imgGroup"><img src="img/1.png" alt="图片"/><div class="text">孙叫兽</div></div></body>
</html>
效果图：
![时间复杂度和空间复杂度[数据结构]](https://img-blog.csdn.net/20140527084927171?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcGF1bGVyeTIwMTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
