console
<html>
<style>
#img {
position: relative;
width: 300px;
}
#img img {
width: 100%;
}
#cap {
position: absolute;
font-weight: bold;
font-size: 32px;
line-height: 1em;
font-family: 'Microsoft YaHei';
color: black;
top: 200px;
left: 80px;
width: 132px;
height: 80px;
outline: 1px solid red;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
#cap div {
overflow: hidden;
width: 100%;
flex: 0 1 auto;
}
</style>
<body>
<div id="img">
<img src="https://cdn.jsdelivr.net/gh/BrandTime/bbb_bot@latest/resources/image-custom/image_data/jupai/jupai.jpg"/>
<div id="cap"><div>[文字<br/>kakakakak]</div></div>
</div>
</body>
</html>