标题居中并位于背景的底部

Question

我是一个React初学者你可以解释我如何在中间放置一个.herogroup（由h1，p和一个按钮组成），距离背景底部（属于.Hero）的距离是20px吗？

<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

我用过css flex。实现你的情况比使用绝对位置更方便。

.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>

Answer 2

在.HeroGroup类中执行此操作

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