How do I position my paragraph text in the middle of my image

Question

How do I position my paragraph text in the middle of my image?

I would like it directly under the H1 tag. If anyone has any solutions, or suggestions on how to go about this. I would really appreciate it

 .coffeeclass { margin-top: 40px; } .registerHeadline { color: #fff; width: 100%; text-align: center; position: absolute; z-index: 1; } .classImage { filter: brightness(20%); } .fullPageImage { min-height: 100%; max-width: 100%; height: auto; width: auto; } .classInfo { color: #fff; max-width: 600px; position: absolute; z-index: 1; } 

 <div class="coffeeclass"> <h1 class="registerHeadline">Register for a class</h1> <p class="classInfo">Have you ever wanted to be a Barista? Or do you just have an interest in coffee. Our barista training classes will take you from novice, to a being able to work as a barista</p> <img src="images/coffeeClass.jpg" class="fullPageImage classImage"> <input type="button" class="registerButton"></input> </div> 

Answer 1

You could do something like this

    <div class="coffeeclass">
      <h1 class="registerHeadline">Register for a class</h1>
    <div id="onPhoto">
        <p class="classInfo">Have you ever wanted to be a Barista? Or do you just have an interest in coffee. Our barista training classes will take you from novice, to a being able to work as a barista</p>
</div>

#onPhoto{
width:100%;
height:100%;
background: url(img/image.jpg) 50% 0 no-repeat;
background-size:cover;
}

Answer 2

 #thediv{ width: 150px; height: 150px; display: table; background-image: url('http://www.drodd.com/images14/red16.png'); background-size: cover; background-position: center; text-align: center; } #thetext{ display: table-cell; vertical-align: middle; } 

 <div id="thediv"> <p id="thetext">Your text.</p> </div>