html - div の高さが 100% の div 要素に img を集中化する

Question

私はこのコードを持っています:

<header>
<div id="logo">
  <img src="img.png" width="288px" height="80px"/>
</div>
</header>

そしてこのCSS：

header { width: 960px; height: 100px; padding: 10px; }

#logo { float: left; height: 100%; border: 1px solid #000; }

#logo img { border: 1px solid #000;  }

このdivのimg要素を垂直方向に集中させる方法は? 表示テーブルとテーブルセルを使用しましたが、機能しません。

Answer 1

#logo { height: 100%; border: 1px solid #000; text-align:center; }
                                       -------^^^^^^^^^^^^^^^^^^---

も削除しますfloat

ライブデモ

Answer 2

このタグを使用します text-align: center ; 画像の CSS からその親 div の CSS まで、CSS は次のようになります。

.box {
    height: 100%;
    width: 450px;
    border: 2px solid red;
    background: green;
    overflow: hidden; 
    text-align:center
}

.box img {
    height: 100%;
    width: auto;
}