position: absolute;で中央寄せする方法

cssでposition: absolute;にした時のセンター寄せってどう書くんだったかな〜って時があるので、
その時にコピペできるようにまとめたメモ。
左右上下ともに中央

img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  margin: auto;
}

transformを使わない場合

img{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

上下を中央

img{
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

左右を中央

img{
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

どういう事かを考えるよりも覚えちゃった方が良いかもしれないですね。

カテゴリー: CSS