如何用css使文本在页面底部居中？

Question

我试图在 html 页面的 *bottom-center 放置一些文本，但它没有对齐。

main {
    position: relative;
    text-align: center;
    max-width: 240px;
    margin: 0 auto;
}

.bottom {
    position:fixed;
    bottom:0;
}

<main>
    <div>
        <h1>Hello</h1>
    </div>
    <div class=bottom>
        <span>Bottom text</span>
    </div>
</main>

我尝试了各种选项，包括 position:absolute; （文本不在底部）和 margin: 0 auto; 在底部 css （没有效果）

我错过了什么？

Answer 1

将

left: 50%;

和

transform: translateX(-50%);

添加到

bottom

以使其居中：

main {
    position: relative;
    text-align: center;
    max-width: 240px;
    margin: 0 auto;
}

.bottom {
    position:fixed;
    bottom:0;
    left: 50%;
    transform: translateX(-50%);
}

<main>
    <div>
        <h1>Hello</h1>
    </div>
    <div class=bottom>
        <span>Bottom text</span>
    </div>
</main>

Answer 2

main {
    position: relative;
    text-align: center;
    max-width: 240px;
    margin: 0 auto;
    height: 100vh;
}

.bottom {
    position: absolute;
    bottom: 0;
    left: 50%; 
    transform: translateX(-50%);
 
}

<main>
    <div>
        <h1>Hello</h1>
    </div>
    <div class=bottom>
        <span>Bottom text</span>
    </div>
</main>