Caption centered and at the bottom of a background

Question

I'm a React beginnerCan you explain me how to place a .herogroup (composed by h1, p and a button) in the middle and 20px far away from the bottom of a background (belonging to .Hero)?

<div>
 <div className="Hero">
   <div className="HeroGroup">
    <h1>ABC</h1>
    <p>ABC</p>
    <Link to="ABC">ABC</Link>
   </div>
 </div>

CSS

.Hero {
height: 1920px;
background-image: url('../images/abc.jpg');
background-size: cover;}

.HeroGroup{
max-width: 500px;
margin: 0 auto;
padding: 150px 50px;
text-align: center;}

Answer 1

I have used css flex. Which is more convenient to achieve your case than using position absolute.

.Hero {
    height: 1920px;
    background-image: url('../images/abc.jpg');
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.HeroGroup{
  max-width: 500px;
  margin: 0 auto;
  padding: 20px 0px;
  display: flex;
  /* flex-wrap: wrap; */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

<div>
 <div class="Hero">
   <div class="HeroGroup">
    <h1>ABC</h1>
    <p>ABC</p>
    <Link to="ABC">ABC</Link>
   </div>
 </div>