html - 在 img 元素中垂直和水平居中 h1

Question

当图像为屏幕宽度的 100% 且始终保持纵横比时，如何将 h1 居中放置在 img 元素中？ This pen shows what I mean .我在这里看到了一些关于 SO 的答案，但图像的宽度和高度始终是固定的。

Answer 1

为了实现您的目标，您需要将 img 和 h1 都放入一个 div 中并使用定位使 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>