Recently, I was working on a large visual screen, which used a lot of decorative pictures. Let’s see how the text is horizontally centered in the picture.

This method is easy to use, other methods may not work well with too many embedded, especially embedded in multiple frameworks.

html

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8" />
		<title>The test text is displayed on the picture</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="Image"/>
			<div class="text">Sun call beast</div>
		</div>
	</body>
</html>
Copy the code

Effect: