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浏览器支持的更多详细信息，请参见此答案。
热门推荐
10 八一幼儿祝福语大全简短
11 公司乔迁食堂祝福语简短
12 婚礼结束聚餐祝福语简短
13 儿媳买车妈妈祝福语简短
14 毕业送礼老师祝福语简短
15 同事辞职正常祝福语简短
16 恭贺新婚文案祝福语简短
17 金店立秋祝福语简短英文
18 婆婆高寿祝福语大全简短