center h1 vertically and horizontally in an img element

Question

How do you center h1 in an img element, when the image is 100% of screens width and always maintaining aspect ratio? This pen shows what I mean . I've seen some answers here on SO, but the image always had width and height fixed.

Answer 1

to achieve your goal you need to put both img and h1 into a div and use positioning to center the h1

 #headerImage { width:100%; margin-left:auto; margin-right:auto; background-position:center; background-repeat:no-repeat; } #greeting{ padding: 0px; position: relative; } #greetin-h1{ text-align: center; color:#000; position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index: 9999; } 

 <div id="greeting"> <img id="headerImage" src="http://study.com/cimages/course-image/intro-to-business-syllabus-resource-lesson-plans_138757_large.jpg" alt=""/> <h1 id="greetin-h1">THIS IS H1 ELEMENT</h1> </div> 

Answer 2

Why not using the image as background?

 html, body{ width: 100vw; } #greeting{ padding: 140px 20px 50px 20px; background-image: url("http://study.com/cimages/course-image/intro-to-business-syllabus-resource-lesson-plans_138757_large.jpg"); background-repeat: no-repeat; background-size: cover; } #greetin-h1{ text-align: center; color:black; } 

  <div id="greeting"> <h1 id="greetin-h1">THIS IS H1 ELEMENT</h1> </div> 

Answer 3

greeting add css style

#greetin {
            padding: 140px 20px 50px 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }

Answer 4

 .wrapper { position: relative; } img { display: block; width: 100%; } h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: gold; } 

 <div class="wrapper"> <img src="https://www.propointgraphics.com/wp-content/uploads/2016/01/stock-photos-vince_3219813k.jpg" alt=""> <h1>Hello, World!</h1> </div> 

Answer 5

Use a combination of relative and absolute positioning, table and table-cell display like this:

CSS:

#headerImage {
    position: relative;
    text-align: center;
    display: inline-block;
}
#headerImage img {
    max-width: 100%;
}
#greeting {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#greetin-h1 {
    margin: 0;
    display: table;
    width: 100%;
    height: 100%;
}
#greetin-h1 span {
    display: table-cell;
    vertical-align: middle;
}

HTML:

<div id="headerImage">
   <div id="greeting">
      <h1 id="greetin-h1"><span>THIS IS H1 ELEMENT</span></h1>
   </div>
   <img src="http://study.com/cimages/course-image/intro-to-business-syllabus-resource-lesson-plans_138757_large.jpg" alt="">
</div>

Fiddle: https://jsfiddle.net/ve8sot21/1

This way the h1 will always be centered horizontally and vertically no matter the image dimension.