これは、親の内部のインライン要素を水平方向と垂直方向に同時に整列させる方法です。
垂直方向の配置
1）このアプローチでは、我々は、作成inline-blockの）最初（または最後の子として（擬似）要素の親をし、その設定heightするプロパティを100%そのすべての高さが取る親を。
2）また、追加するとvertical-align: middle、inline（-block）要素が行スペースの中央に保持されます。したがって、そのCSS宣言をfirst-childと要素（画像）の両方に追加します。
3）最後に、inline（-block）要素間の空白文字を削除するために、によって親のフォントサイズをゼロに設定できますfont-size: 0;。
注：以下では、Nicolas Gallagherの画像置換手法を使用しました。
メリットは何ですか？
<div class="container">
<div id="element"> ... </div>
</div>
.container {
height: 300px;
text-align: center; /* align the inline(-block) elements horizontally */
font: 0/0 a; /* remove the gap between inline(-block) elements */
}
.container:before { /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
#element {
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
font: 16px/1 Arial sans-serif; /* <-- reset the font property */
}
出力
レスポンシブコンテナ
OPはレスポンシブコンテナーの作成方法をすでに知っているので、このセクションでは質問に答えません。ただし、そのしくみについて説明します。
するために高さのとのコンテナ要素の変化の幅（アスペクト比を尊重する）、我々は、トップ/ボトムのパーセント値を使用することができるpaddingプロパティ。
上部/下部のパディングまたはマージンのパーセンテージ値は、包含ブロックの幅を基準にしています。
例えば：
.responsive-container {
width: 60%;
padding-top: 60%; /* 1:1 Height is the same as the width */
padding-top: 100%; /* width:height = 60:100 or 3:5 */
padding-top: 45%; /* = 60% * 3/4 , width:height = 4:3 */
padding-top: 33.75%; /* = 60% * 9/16, width:height = 16:9 */
}
こちらがオンラインデモです。下から行をコメント化し、パネルのサイズを変更して効果を確認します。
また、このpaddingプロパティをダミーの子または:before/ :after疑似要素に適用して、同じ結果を得ることができます。ただし、この場合、パーセンテージの値はそれ自体の幅を基準にしていることに注意してください。padding.responsive-container
<div class="responsive-container">
<div class="dummy"></div>
</div>
.responsive-container { width: 60%; }
.responsive-container .dummy {
padding-top: 100%; /* 1:1 square */
padding-top: 75%; /* w:h = 4:3 */
padding-top: 56.25%; /* w:h = 16:9 */
}
デモ＃1。
デモ＃2 （:after疑似要素の使用）
コンテンツを追加する
padding-topプロパティを使用すると、コンテンツの上部または下部、コンテナ内に大きなスペースが生じます。
それを固定するために、我々は、ラッパー要素でコンテンツをラップ使用して文書通常の流れからその要素を削除する必要があり、絶対配置を（BUは、使用してラッパーを拡大し、最終的、およびtop、right、bottomおよびleftプロパティ）は、親の空間全体を埋めるために、コンテナ。
さあ行こう：
.responsive-container {
width: 60%;
position: relative;
}
.responsive-container .wrapper {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
こちらがオンラインデモです。
すべてをまとめる
<div class="responsive-container">
<div class="dummy"></div>
<div class="img-container">
<img src="http://placehold.it/150x150" alt="">
</div>
</div>
.img-container {
text-align:center; /* Align center inline elements */
font: 0/0 a; /* Hide the characters like spaces */
}
.img-container:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.img-container img {
vertical-align: middle;
display: inline-block;
}
こちらがWORKING DEMOです。
明らかに、ブラウザーの互換性の::beforeために疑似要素を使用することを避け、の最初の子として要素を作成することができます。.img-container
<div class="img-container">
<div class="centerer"></div>
<img src="http://placehold.it/150x150" alt="">
</div>
.img-container .centerer {
display: inline-block;
vertical-align: middle;
height: 100%;
}
更新されたデモ。
max-*プロパティの使用
下の幅のボックスの画像内部を保つために、あなたが設定することができmax-height、およびmax-width画像のプロパティ：
.img-container img {
vertical-align: middle;
display: inline-block;
max-height: 100%; /* <-- Set maximum height to 100% of its parent */
max-width: 100%; /* <-- Set maximum width to 100% of its parent */
}
こちらが更新されたデモです。