【令和最新版】上下中央揃え

align-content を使った上下中央揃え

flexやgrid用のコンテナを用意しなくてもalign-contentだけで上下中央揃えができるようになった。

.container {
  align-content: center;
}

その他の方法

/* flexbox */
.container {
  display: flex;
  align-items: center;
}

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

/* line-height */
.container {
  height: 100px;
}
.inner {
  line-height: 100px;
}

/* absolute */
...省略...

/* transform */
...省略...