css之文字在图片上居中显示

< html lang=“en”>

< head>
< meta charset=“UTF-8”>
< meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
< title>Document< /title>
< style>
.children {
width: 100px;
height: 100px;
position: relative;
margin: auto;
text-align: center;
}
.words {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: red;
}
img {
width: 100%;
height: 100%;
}
< /style>
< /head>

< body>
< div class=“parent”>
< div class=“children”>
< span class=“words”>cdfced< /span>
< img src=“1.jpg” alt="">
< /div>
< /div>
< /body>

< /html>