如何在不移动下方图像的情况下将文本居中放置在背景图像上？ HTML/CSS

Question

I have an image that is under the background image property and I have some lines of text within that div class. I keep using the margin top property to move the text to center it over the image but it also adds a margin to the image. I tried to use the padding prop but it also stretches the background I put on. How do I center this text without it adding that margin to the image underneath it? Any help appreciated.

Answer 1

You can center text using text-align: center , margin: auto . Also, using display: flex; justify-content: center; align-items: center; display: flex; justify-content: center; align-items: center; . If element has absolute positioning it entails another solution. Perhaps, you should align your div, but... Need to clarify with code example for better understanding.

Answer 2

Try something like this

position: absolute;
top: 50%;
left: 50%;

In css file