position:absolute、margin:0 autoして左右中央配置する

width/2だけネガティブマージンは面倒

position:absoluteして左右中央配置するのは、left50%にして、width/2だけネガティブマージンというやり方しか知らなかった。widthを知るのは面倒だ。だから調べてみた。そしたら別のやり方があった。

ウンチを上下左右中央配置している。

top,left,right,leftをauto以外の値にする

上下左右中央配置にする

.iconImage{
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  margin:auto;
  width:145px;
  height:145px;
  background:url("http://jsrun.it/assets/2/X/4/b/2X4bJ.png") no-repeat;
  border-radius:10px;
}

top,left,right,leftの初期値はautoだ。leftだけでなくrightもauto以外の値、ここではわかりやすくするために0とした。

左右中央配置にする

.iconImage{
  position: absolute;
  left: 0;
  right: 0;
  margin:0 auto;
  width:145px;
  height:145px;
  background:url("http://jsrun.it/assets/2/X/4/b/2X4bJ.png") no-repeat;
  border-radius:10px;
}

left,rightを0にした。