Html 覆盖文本的响应图像保持在同一位置

我想在图像上添加一个覆盖文本，即使我在浏览器中放大或缩小，或者在不同的设备中查看，文本也不能超出图像，而是始终位于图像内部

此外，即使使用不同的设备，具有100%宽度和高度的图像和文本始终位于同一位置。使用<强>仅< /强> CSS和HTML的方式，每一个框架都做了Bootstrap、OrthalIsIsss、Basic、SimultUI等。

.image{
位置：相对位置；
宽度：100%；
/*对于IE 6*/
}
img{
宽度：100%；
}
h1{
位置：绝对位置；
顶部：200px；
左：0；
宽度：100%；
}
h1跨度{
颜色：白色；
字体：粗体24px/45px Helvetica，无衬线；
字母间距：-1px；
背景：rgb（0,0,0）；
/*退色*/
背景：rgba（0,0,0,0.7）；
填充：10px；
}

菲律宾夏季首都碧瑶城

即使在调整相对

的大小时，这也将居中

即使在调整相对的

.image{
位置：相对位置；
宽度：100%；
/*对于IE 6*/
}
img{
宽度：100%；
}
h1{
位置：绝对位置；
最高：40%；
宽度：100%；
}
h1跨度{
颜色：白色；
字体：粗体24px/45px Helvetica，无衬线；
字母间距：-1px；
背景：rgb（0,0,0）；
/*退色*/
背景：rgba（0,0,0,0.7）；
填充：10px；
}

菲律宾夏季首都碧瑶城

.image{
位置：相对位置；
宽度：100%；
/*对于IE 6*/
}
img{
宽度：100%；
}
h1{
位置：绝对位置；
最高：40%；
宽度：100%；
}
h1跨度{
颜色：白色；
字体：粗体24px/45px Helvetica，无衬线；
字母间距：-1px；
背景：rgb（0,0,0）；
/*退色*/
背景：rgba（0,0,0,0.7）；
填充：10px；
}

菲律宾夏季首都碧瑶城

h1是否需要居中？是的，在图像上方居中。我用博客作为我的参考。请原谅，如果我选择这个网站作为我的参考，但我认为它是有用的@tesseract

h1

是否需要居中？是的，居中于图像上方。我用博客作为我的参考。请原谅，如果我选择这个网站作为我的参考，但我认为它是有用的@特塞拉特

h1 { 
   position: absolute; 
   top: 50%; 
   left: 50%; 
   transform:translate(-50%, -50%); 
}