How to center text at the bottom of the page with css?

Question

I am trying to place some text at the bottom-center of an html page but it is not aligned.

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>

I have tried various options including position:absolute; (text not at bottom) and margin: 0 auto; in bottom css (no effect)

What am I missing?

Answer 1

Ensure that the bottom spans the full width of its parent container, occupying 100% of the available horizontal space. When setting its position to fixed at the bottom of its relative parent, make sure the starts from the left corner and extends horizontally to cover the entire width of the parent container.

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

.bottom {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
}

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