Example
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 */
}
See Dynamic Vertical and Horizontal Centering under the Flexbox documentation for more details on flexbox and what the styles mean.
Browser Support
Flexbox is supported by all major browsers, except IE versions before 10.
Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes.
For a quick way to generate prefixes there is Autoprefixer, a third-party tool.
For older browsers (like IE 8 & 9) a Polyfill is available.
For a more detailed look at flexbox browser support, see this answer.
