どもです。

この仕事始めて一年半弱。またコーディングで詰まりました。

従来の方法

さて、画像の上下中央揃えをしたいのですが、これにハマりました。
HTMLの方を自由に調整できるなら、以前の記事で書いたやり方をすれば堅実です。

親要素{
display:table;
}
子要素{
display:table-cell;
vertial-align:middle;
}
孫要素{
display:block;
margin:auto;
width:適当に;
height:適当に;
}
（又は子要素にtext-align:center、孫要素にdisplay:inline-blockでもok）

が、これができない場合がある。
既にコーディングが終わっているものを弄る場合、変にhtmlを弄るとスタイルが大幅に崩れる、なんてことはザラ。
できるだけCSSで済ませたいのに、親要素と子要素で終わってしまっていて、しかも子要素がimgタグなんかだったりするともうこの方法は使えません。

親要素{
line-height:親要素の高さと同じpx;
}
子要素{
vertical-align:middle
（display:inline-block;）
}

僕は最近までこの方法を使っていたのですが、これができるときできないときがあるのが悩みでした。
しかも、IEだと他ブラウザでできていてもできないときがある。

さて、今回も上述の方法を使っていたのですが、これが効かない。
親要素のline-heigthが上手く効いてくれない場合があるっぽいんですよね。
頭を抱えつつ色々調べてみたところ、なんと画期的な解決法を書かれていた方がいました！

新しい方法

親要素{
position:relative;
}
子要素{
position: absolute;
top: -100%;
left: -100%;
right: -100%;
bottom: -100%;
margin: auto;
width:適当に;
height:適当に;
}

え、こんな方法でできんの？というのが初見での率直な感想。
半信半疑でやってみたところ、見事上下左右中央揃えになるではないですか。凄ぇ。

しかもこれ、応用すれば左右中央下揃えとか、上下中央右揃えとか、色々できるらしい。
というのも、この現象はpositionとmarginの関係性が由来しているそうで…

どうしてこうなるのか

簡単に説明するなら、

ということだそうです。
つまるところ、上述のtop等の数値は同じなら何でも良いと言えます。

この辺詳しくは↓のサイト様を参照で。

参考サイト

今回のコードを教えてくださったサイトはこちら。
【バシャログ。】CSSでblock要素を上下左右中央寄せにする、イマドキの方法。

原理を解説してくださったサイトはこちら。
【WWW WATCH】position: absolute; の指定で要素が上下左右中央配置になる理由