Center text on img

PHOTO EMBED

Wed Jan 12 2022 12:35:55 GMT+0000 (Coordinated Universal Time)

Saved by @sarahgibbon ##html ##css 

/* HTML */  
<div class="main-img">
    <img class="main-pic" src="https://ableton-production.imgix.net/about/header.jpg?auto=format&fit=crop&fm=jpg&h=822&ixjsv=1.1.3&w=1333" alt="ableton header img">
    <h1 class="title-text centered">Ableton</h1>
  </div> 

/* CSS */ 
.main-img {
  position: relative;
}

.title-text {
  position: absolute;
  bottom: 50%;
  right: 50%;
  color: orange;
  padding-left: 20px;
  padding-right: 20px;
content_copyCOPY

Ableton img with text centered