Page 95 - CSS

View Result

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.

Using position: absolute

Working in old browsers (IE >= 8)

Automatic margins, paired with values of zero for the left and right or top and bottom offsets, will
center an absolutely positioned elements within its parent.

View Result

HTML

<div class="parent">
<img class="center" src="http://lorempixel.com/400/200/" />
</div>

CSS

.parent {
position: relative;
height: 500px;
}

.center {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

Elements that don't have their own implicit width and height like images do, will need those values
defined.

Other resources: Absolute Centering in CSS

https://riptutorial.com/ 73