使用 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 瀏覽器支援的更詳細資訊，請參閱此答案 。