让一个文字在背景图片水平居中的方法最近工作中在做那个可视化大屏，图中用到了大量的装饰图片，下面看一下文字怎么在图片中水平

最近工作中在做那个可视化大屏，图中用到了大量的装饰图片，下面看一下文字怎么在图片中水平居中。

这个方法比较好用，其他的方法嵌入太多可能不是特别好使，尤其嵌入到多个框架中。

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>

效果图：