有没有办法让这个 H1 在 div 的底部居中？答案

【问题标题】：Is there a way to center this H1 at the bottom of the div?有没有办法让这个 H1 在 div 的底部居中？
【发布时间】：2021-02-20 08:29:16
【问题描述】：

我尝试过的所有方法都不起作用我需要简单的代码，我可以使用它来使其位于该 div 的底部，而不是使整个 div 成为一个网格，而只是让底部的网格容纳文本。我是 html/css 的新手，所以老实说，我只知道页面上的真正内容。垂直对齐底部也不起作用...

<!DOCTYPE html>
<html>
<head>
    <title>Making a Shop Landing Page</title>
</head>
<style>
*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}
body{
    background-color:#eee;
}
main{
    height:100%;
}
html, body {
    height:100%;
    margin:0;
}
.container{
    display:grid;
    grid-template-areas:
        "header header header"
        "ads main main"
        "footer footer footer";
    height:100%;
    width:100%;
    grid-template-rows:20% 70% 10%;
    grid-template-columns:20% 80%;
}
.grid-item{
    border:black solid 3px;
}
.header{
    grid-area:header;
}
.ads{
    grid-area:ads;
    width:100%;
}
.main{
    grid-area:main;
    height:100%;
}
.footer{
    grid-area:footer;
}
#navbar {
    height: 100px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #eee;
    padding: 0;
    margin: 0;
    border:black solid 2px;
}
#header{
    text-align:center;
    vertical-align:bottom;
}
</style>
    <body>
    <main>
        </div>
        <div class="container">
            <div class="header grid-item">
                <h1 id="header">This is the Title</h1>      
            
            </div>
            <div class="ads grid-item"><p>awdsmapwdsmaswdpawmda wdawpmds awpdsmawp dmaw </p></div>
            <div class="main grid-item">
                <h1>awdawdaswdawd awdasw daw dsawd awd aw dawd awda dwa daw daw wdaw;lds anmw;dsnaswsd nwa;lds naw;kd nwa;ds naw;dn aw awdknawidgawpidhawd'ajdswn'awnda'swnda'wdnasw'dnaw'dnawds'awndanlw'dl </h1>  
            </div>
            <div class="footer grid-item"></div>
        </div>
    </main>




    </body>
</html>

【问题讨论】：

标签： html css text positioning

【解决方案1】：

为了使其位于 div 的底部，您可以将容器设置为相对位置，然后将您的文本设置为绝对位置并将其放在您想要的位置

.header{
  position: relative;
}

#header{
  position: absolute;
  bottom: 0px;
  left: 50%;
}

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助，质量更高，更有可能吸引投票。
有什么方法可以让这个响应吗？

【解决方案2】：

尝试添加给定的代码。

.header{
    grid-area:header;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

【讨论】：

非常感谢，我会尝试对此进行逆向工程，以便我知道它们的作用，非常感谢！