上下中央揃えのCSSまとめ
Flexboxがたった3行で最も手軽

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

参考ページ：https://ics.media/entry/17522/

最短2行！CSSで縦横中央揃えをする最新の方法

.container {
display: grid;
place-items: center;
}

参考ページ：https://note.com/ebifry/n/n481fcb7ca520

HTMLで垂直線を作成する