垂直对齐div中心的图像

Question

我想垂直对齐并水平对齐div中心的图像。目前我的代码只适用于水平对齐，现在我也希望垂直对齐它。你能帮我么？

这是我的css代码：

.centre
{
    height: 100%;
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

img
{
    vertical-align: middle;
}

Answer 1

在display:table-cell;上使用.centre。这是一个清楚地显示它的示例，只需相应地更改选择器。 http://jsfiddle.net/Y6NTf/

Answer 2

另一种选择是将img position设置为亲戚，将top和left设置为50%。 Here是一个完整的例子。

HTML：

<div id="myDiv">
  <img id="myImg" src="http://i.cdn.turner.com/cnn/.element/img/3.0/global/header/hat/arrow_black.png"></img>
</div>  

CSS：

#myDiv {
  height: 300px;
  width: 300px;
  background: grey;
}

#myImg {
  position:relative;
  top: 50%;
  left: 50%;
}