html - 将img集中在div元素中，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

现场演示

Answer 2

Just Replace Your CSS like this.

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

Answer 3

使用这个标签 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;
}