在div元素中集中img，div的高度为100％

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

Live Demo

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;
}

Answer 3

就像这样替换你的CSS。

http://jsfiddle.net/lvtrvd/29uGQ/

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

#logomark { height: 100%; border: 1px solid #000;position: relative;}

#logomark img { border: 1px solid #000; position: absolute;top:0;
bottom:0;left:0;right:0; margin:auto;}