未知の高さの画像が垂直に中央に配置されています

画像の幅と高さは未知で、固定されたサイズはありません.この前提の下で、画像を幅と高さを固定した容器の中で垂直に中央にします.最近やっているプロジェクトにはこの需要があるので、まずよく使われる方法を集めて整理しました.
次の図は理想的な効果図で、外部コンテナの幅と高さは固定されており、中間のピクチャの幅と高さは未知ですが、ピクチャは常に外部コンテナに対して垂直に中央に位置します.
しかし、実際にブラウザで実現される効果は完璧ではなく、各ブラウザの解析が異なるため、各ブラウザでは1 px-3 pxのばらつきがある.
方法1:
この方法は、外部コンテナの表示モードをdisplay:table、imgラベルの外部にspanラベルをネストし、spanの表示モードをdisplay:table-cellに設定することで、vertical-alignを表要素のように整列させることが容易になります.もちろん、これは標準ブラウザの下でのみ、IE 6/IE 7は位置決めを使用する必要があります.
HTML構造部分:

<div id="box">
    <span><img src="images/demo.jpg" alt="" /></span>
</div>

CSSスタイルセクション:

<style type="text/css">
#box{
	width:500px;height:400px;
	display:table;
	text-align:center;
	border:1px solid #d3d3d3;background:#fff;
}
#box span{
	display:table-cell;
	vertical-align:middle;
}
#box img{
	border:1px solid #ccc;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#box{
	position:relative;
	overflow:hidden;
}
#box span{
	position:absolute;
	left:50%;top:50%;
}
#box img{
	position:relative;
	left:-50%;top:-50%;
}
</style>
<![endif]-->

方法2:
方法2と方法1の実現の原理は大同小異で,構造も同じで,方法1は条件注釈,方法2はCSS Hackを用いる.
CSSスタイルセクション:

<style type="text/css">
#box{
	width:500px;height:400px;
	overflow:hidden;
	position:relative;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	border:1px solid #d3d3d3;background:#fff;
}
#box span{
	position:static;
	*position:absolute; /*  IE6/7 Hack*/
	top:50%; /*  IE6/7 Hack*/
}
#box img {
	position:static;
	*position:relative; /*  IE6/7 Hack*/
	top:-50%;left:-50%; /*  IE6/7 Hack*/
	border:1px solid #ccc;
}
</style>

この方法には、標準ブラウザでは外部コンテナboxの表示モードがdisplay:table-cellであるため、boxがmargin属性を使用できず、IE 8で枠線を設定しても無効であるという弊害がある.
方法3:
標準ブラウザは外部コンテナ#boxの表示モードをdisplay:table-cellに設定するか、IE 6/IE 7はimgラベルの前に空のラベルを1対挿入する方法を利用する.
HTML構造部分:

<div id="box">
    <i></i><img src="images/demo.jpg" alt="" />
</div>

CSSスタイルセクション:

<style type="text/css">
#box{
width:500px;height:400px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if IE]>
<style type="text/css">
#box i {
	display:inline-block;
	height:100%;
	vertical-align:middle
	}
#box img {
	vertical-align:middle
	}
</style>
<![endif]-->

方法4:
imgラベルの外にpラベルを包み、標準ブラウザはpラベルの偽クラス属性:beforeを利用して実現し、IE 6/IE 7はCSS式を使用して互換性を実現した.
HTML構造部分:

<div id="box">
    <p><img src="images/demo.jpg" alt="" /></p>
</div>

CSSスタイルセクション:

#box{
	width:500px;height:400px;
	text-align:center;
	border:1px solid #d3d3d3;background:#fff;
}
#box p{
	width:500px;height:400px;
	line-height:400px;  /*        */
}

/*         */
#box p:before{
	content:".";  /*            ，         */
	margin-left:-5px; font-size:10px;  /*       BUG */
	visibility:hidden;  /*       */
}

#box p img{
	*margin-top:expression((400 - this.height )/2);  /* CSS       IE6/IE7 */
	vertical-align:middle;
	border:1px solid #ccc;
}

使用:beforrという方法は標準ブラウザにとっては比較的パワーがあり、副作用も見られませんでしたが、IE 6/IE 7については性能に対する要求が高い場合はCSS式の方法は慎みましょう.
方法5:
この方法はIE 6/IE 7に対して,画像外部容器のフォントサイズを高さの0.873倍に設定することで中央に位置することができ,標準ブラウザは上記の方法で互換性を実現し,構造も比較的優雅である.
HTML構造部分:

<div id="box">
    <img src="images/demo.jpg" alt="" />
</div>

CSSスタイルセクション:

#box{
	width:500px;height:400px;
	text-align:center;
	border:1px solid #d3d3d3;background:#fff;

	/*         */
	display: table-cell;
    vertical-align:middle;

	/*   IE6/IE7 */
	*display:block;
	*font-size:349px;  /*            0.873  400*0.873 = 349 */
	*font-family:Arial;  /*    utf-8   hack    ， gbk   */
}

#box img{
	vertical-align:middle;
}

フォントサイズを設定する方法は変な感じがして、合理的な解釈も見られず、画像要素には他の要素とは異なる特性があることしか知られていませんが、IE 6/IE 7にとって、この方法は比較的力があります.
思考:多くの方法は外部容器の表示モードをtableに設定することに依存して垂直中心、すなわちdivを実現してtableをシミュレートすることができ、CSSにこの効果を実現する属性があればどんなに良いか.もしあなたも良い方法があれば、分かち合うことを歓迎します.一部の方法はインターネットから来ており、雨夜帯刀によってテストされて整理されている.