FLAB NOTE【FLAB.RED】正方形の中に伸縮自在で異なるサイズ比率の画像を配置する

ワードプレスとかで画像の大きさが縦長・横長いろいろあるけど、とりあえず正方形の中に長編基準で天地左右センターに配置したい場合。
なんで、縦長の画像の場合は、左右がアキになり、横長の画像は上下にアキができる感じです。（のちほど画像もいれませう）
それと、レスポンシブにしたいので正方形（スクエア）を維持して伸縮自在にしたい場合。
こんな感じでいけます。

<ul>
<li>
<a>
<figure>
<span>
<img src="○○○○" alt="" />
</span>
</figure>
</a>
</li>
</ul>

<ul>

<li>

<a>

<span>

</span>

</figure>

</a>

</li>

</ul>

figure{
 list-style-type:none;
  width: 100%;
  height: auto;
  position: relative;
}
 
figure:before {
  content: "";
  display: block;
  padding-top: 100%; 
}
 
figure span{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
}
 
figure span:before{
  content: "";
  height: 100%;
  vertical-align: middle;
  width: 0px;
  display: inline-block;
}
 
figure span > *{
  vertical-align: middle;
  display: inline-block;
}
 
span img{
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

figure{

list-style-type:none;

width: 100%;

height: auto;

position: relative;

}

figure:before {

content: "";

display: block;

padding-top: 100%;

}

figure span{

display: block;

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

text-align: center;

box-sizing: border-box;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

-o-box-sizing: border-box;

-ms-box-sizing: border-box;

}

figure span:before{

content: "";

height: 100%;

vertical-align: middle;

width: 0px;

display: inline-block;

}

figure span > *{

vertical-align: middle;

display: inline-block;

}

span img{

max-width: 100%;

height: auto;

max-height: 100%;

}

注意点はこれの前にdisplay:tableとかやってるとハマります。
ハマりました。