CSS 使用Flexbox

示例

HTML：

<div class="container">
  <img xx_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 xx_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浏览器支持的更多详细信息，请参见此答案。