css_Experience 交換を使用して画像を垂直方向に中央揃えにするためのヒント

この質問の難しさは次の 2 点にあります。

垂直方向の中央揃え。
写真は一部特徴のある交換用エレメントです。​
これを解決する方法については、比較的構造的にクリーンで CSS を使用した簡単な回避策のトレードオフを以下に示します。

.box {
/*IE以外の主流ブラウザで認識される垂直中央揃え方式*/
表示: テーブルセル;
垂直整列:中央;

/*水平方向のセンタリングを設定*/
text-align:center;

/* IE 用のハック */
*表示: ブロック;
*font-size: 175px;/* は高さの約 0.873、200*0.873 は約 175*/
*font-family:Arial;/*gbk エンコーディングなど、非 utf-8 によって引き起こされるハッキング失敗の問題を防止します*/

幅:200ピクセル;
高さ:200ピクセル;
境界線: 1px 実線 #eee;
}
.box img {
/*画像を垂直方向の中央に設定します*/
垂直整列:中央;
}

もちろん他の解決策もありますが、ここでは詳しく説明しません。