Snippet for positioning items centered horizontally and vertically:
display: flex; /* turn flexbox on */ justify-content: center; /* center children horizontally */ align-items: center; /* center children vertically */
Snippets for container positioning items and IE10 rules:
/* IE 10 flexbox cheatsheet */ /* enable flexbox */ display: flex; display: -ms-flexbox; /* container - horizontal align items */ justify-content: flex-start | flex-end | center | space-around | space-between; -ms-flex-pack: start | end | center | distribute | justify; /* container - vertical align items */ align-items: flex-start | flex-end | center | stretch | baseline; -ms-flex-align: start | end | center | stretch | baseline; /* container - vertical height for items when extra space is available (multi line) */ align-content: flex-start | flex-end | center | space-around | space-between | stretch; -ms-flex-line-pack: start | end | center | distribute | justify | stretch;
Read more here:
css-tricks.com/snippets/css/a-guide-to-flexbox/
Legacy browser support: (E.g. Internet Explorer 10):
https://css-tricks.com/using-flexbox/
Cheatsheet flexbox equiv. for IE10:
https://gist.github.com/Paul-frc/3ed765ed10c9635384e98f58334081e4