使用 Flexbox

HTML：

<div class="container">
  <img src="http://lorempixel.com/400/200" />
</div>

CSS：

html, body, .container {
  height: 100%;
}    
.container {
  display: flex;
  justify-content: center; /* horizontal center */
}
img {
  align-self: center; /* vertical center */
}

查看结果

HTML：

<img src="http://lorempixel.com/400/200" />

CSS：

html, body {
  height: 100%;
}   
body {
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

查看结果

有关 Flexbox 的更多详细信息以及样式的含义，请参阅 Flexbox 文档下的动态垂直和水平居中 。

浏览器支持

除了 10 之前的 IE 版本 ，所有主流浏览器都支持 Flexbox。

一些最新的浏览器版本，例如 Safari 8 和 IE10，需要供应商前缀 。

为了快速生成前缀， Autoprefixer 是第三方工具。

对于旧版浏览器（如 IE 8 和 9），可以使用 Polyfill 。

有关 flexbox 浏览器支持的更详细信息，请参阅此答案 。