コンテンツが少ない場合でもフッターを最下部にするコードはよく見かけますが、
合わせてコンテンツを上下中央にする場合に悩んでしまったので投稿します。

HTML

body 要素直下に header、main、footer 要素を配置します。

index.html

<body>
  <header>
    <p>ヘッダー</p>
  </header>
  <main>
    <p>メイン</p>
  </main>
  <footer>
    <p>フッター</p>
  </footer>
</body>

CSS

main 要素がない場合でも footer 要素がページ下部に配置されるようにしてあります。

style.css

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
}
footer {
  position: sticky;
  top: 100vh;
}