[CSS]仮想要素を使用してinline-block要素を垂直方向に中央に配置する

仮想要素（Pseudo Element）は インラインブロック 要素として機能するので、 vertical-align：middle ルールを使用して、他の インラインブロック 要素（ログなど）を中央に配置することができます。 そして画面の両要素を合わせるために、マイナスマージン（margin）の値を追加するようにします。

例：

HTMLサンプル：

<div id="header">
<div id="logo">
<img src="http://abload.de/img/unbenannt-1bmq5b.png" alt=""/>
</div>
</div>

CSSサンプル：

#header{
width:100%;
height:4rem;
background:silver;
}

#header div{
display:inline-block;
vertical-align:middle;
height:100%;
}

#header #logo{
width:75%;
}

#header #logo:before{
content:' ';
display:inline-block;
vertical-align:middle;
height:100%;
margin-left: -4px;
}

#header #logo img{
max-width:100%;
vertical-align:middle;
}

• デモ： jsfiddle

そしてDIVを垂直方向の配置する別の方法で この記事も参考にしてください。

参照：

• Image doesn't scale correctly (stackoverflow)
• Centering in the Unknown（要素を正確に知ることができない状況で中央揃えさせる）

メモ：

• spanを垂直に中央に配置する（CSS）
• div内のdivを中央に配置する