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。
某些最新的浏览器版本（例如Safari8和IE10）需要供应商前缀。
为了快速生成前缀，可以使用第三方工具Autoprefixer。
对于较旧的浏览器（例如IE8和9），可以使用Polyfill。
有关Flexbox浏览器支持的更多详细信息，请参见此答案。