css - 在 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%。这是一个完整的工作示例。

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