CSS absolute × transform で上下中央寄せ(コピペ用)

absolute × transform

コピペして使う用の記事です。
flexやmargin:auto;などで中央寄せも出来ますが、この手法は擬似要素などを中央寄せする際にとても便利です。

.wrapper {
   width: 100%;
   position: relative;
}

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%); 
  /* transformがセンタリングしたい要素の縦、横幅分を引いてくれるので中央になる */
}

wrapperの上下中央にinnerが配置されます。