CSSレイアウト:画像をDIVの中で上下左右中央(水平と垂直の両方が中央)に設定する

CSSレイアウトの例、この例は実用的だと信じています.一つの画像をDivコンテナの中で上下、左右に中央、つまり水平と垂直に中央にします.役に立つでしょう.普段出会う確率が高いので、CSSとHTMLを組み合わせてこのプレゼンテーションを実現します.コードを参照してください.

<style type="text/css">
    div{border:1px solid #ccc;height:500px;width:500px;
        text-align:center;margin:0 auto;background:#ccc;}
    img{vertical-align:middle;}
    div span{height:100%;width:0;overflow:hidden;
             display:inline-block;vertical-align:middle}
style>
<div class="test">
<img src="http://p.ananas.chaoxing.com/star3/origin/53c8d26ba310a822ad8b3447.jpg"><span> span>
div>

テスト効果:Div class内の画像が水平と垂直に中央に表示されます.