wulin.comの記事紹介（www.vevb.com）：写真を垂直に集中させる方法。
画像の幅と高さは不明であり、固定サイズはありません。この前提の下では、幅と高さが固定された容器の垂直に絵を垂直に中央に配置することは非常に厄介です。最近のプロジェクトはこのソリューションを使用する可能性があるため、一般的に使用されるいくつかの方法を収集して整理しました。
次の図は理想的なレンダリングです。外部容器の幅と高さは固定されており、中央の画像の幅と高さは不明ですが、画像は常に外部容器に対して垂直に中央に配置する必要があります。
ただし、実際に実装された効果は完全ではありません。各ブラウザの解析は異なるため、各ブラウザの偏差は1px-3pxです。
方法1（XHTML 1.0トランジショナル）：
この方法は、外部コンテナの表示モードを設定して表示し、テーブルを表示し、IMGタグの外側にスパンタグをネストし、スパンの表示モードを表示するように設定します。もちろん、これは標準的なブラウザーのみです。IE6/IE7もポジショニングを使用する必要があります。
HTML構造部：
<div id = box>
<span> <img src = images/demo.jpg alt => </span>
</div>
CSSスタイルの部分：
<style type = text/css>
＃箱{
幅：500px;高さ：400px;
表示：テーブル;
テキストアライグ：センター;
ボーダー：1pxソリッド＃D3D3D3;背景：#fff;
}
#boxスパン{
ディスプレイ：テーブルセル;
垂直アライイン：中央;
}
#boxIMG {
ボーダー：1pxソリッド#ccc;
}
</style>
<！ - [LTE IE 7]>
<style type = text/css>
＃箱{
位置：相対;
オーバーフロー：隠し;
}
#boxスパン{
位置：絶対;
左：50％; TOP：50％;
}
#boxIMG {
位置：相対;
左：-50％;トップ：-50％;
}
</style>
<！[endif] - >
方法2（XHTML 1.0トランジショナル）：
方法2と方法1の実装の原則と構造は類似しており、構造は同じです。方法1は条件付き注釈を使用し、方法2はCSSハックを使用します。
CSSスタイルの部分：
<style type = text/css>
＃箱{
幅：500px;高さ：400px;
オーバーフロー：隠し;
位置：相対;
ディスプレイ：テーブルセル;
テキストアライグ：センター;
垂直アライイン：中央;
ボーダー：1pxソリッド＃D3D3D3;背景：#fff;
}
#boxスパン{
位置：静的;
*位置：絶対; /*IE6/7のハック*/
トップ：50％; /*IE6/7のハック*/
}
#boxIMG {
位置：静的;
*位置：相対; /*IE6/7のハック*/
トップ：-50％;左：-50％; /* IE6/7のハック*/
ボーダー：1pxソリッド#ccc;
}
</style>
この方法には欠点があります。標準のブラウザでは、外部コンテナ#Boxの表示モードが表示されるため、テーブルセルは#Boxに使用できず、IE8の境界設定も無効です。
方法3（XHTML 1.0 Strict）：
標準のブラウザは、外部コンテナ＃ボックスの表示モードを設定して表示します。 IE6/IE7は、IMGタグの前に空のタグを挿入する方法を使用します。
HTML構造部：
<div id = box> <i> </i> <img src = images/demo.jpg alt => </div>
CSSスタイルの部分：
<style type = text/css>
＃箱{
幅：500px;高さ：400px;
ディスプレイ：テーブルセル;
テキストアライグ：センター;
垂直アライイン：中央;
ボーダー：1pxソリッド＃D3D3D3;背景：#fff;
}
#boxIMG {
ボーダー：1pxソリッド#ccc;
}
</style>
<！ - [ie]>
<style type = text/css>
#boxI {
ディスプレイ：インラインブロック。
高さ：100％;
垂直アライイン：中央
}
#boxIMG {
垂直アライイン：中央
}
</style>
<！[endif] - >
方法3は、XHTML 1.0の移行にも適用されます。上記の方法は、Web Teaching Webサイトから収集されています。とりあえず、これらの3つの方法のみが非常に満足しており、互換性は良好であり、制限は比較的少ないです。また、いくつかの方法を1つずつテストしましたが、結果は理想的ではなく、異なるブラウザーの間にはまったく異なる違いがあります。さらに、Situ Zhengmeiもここでいくつかの方法を収集しました。
思考：多くの方法は、外部容器の表示モードをテーブルに設定して、垂直センタリング、つまりテーブルをシミュレートするためにdivを実現することに依存しています。 CSSがこの効果を達成するためのプロパティを持っている場合、それはどれほど良いことでしょう。良い方法がある場合は、共有できます。
オリジナル：