One of CSS3’s most exciting new features (well exciting for front end developers) is the addition of flex box.
One cool application of flexbox is the ability to vertical and horizontally center elements quickly and easily. To do this I usually add an aligner class to the parent element which will contained vertically/horizontally centered children elements and apply these styles:
[dt_code].aligner {
display: flex;
align-items: center;
}[/dt_code]
This is great for vertically centering elements inside a container, but what happens if you don’t want to horizontally center the elements as well, let’s say you want to right align one particular element. Well its actually pretty easy to do, just add the following styles to the element you don’t want to center align:
[dt_code] .flex-right {
margin-left: auto !important;
} [/dt_code]
For an awesome article on what can be archived (alignment wise) with flex check out Adam Bray’s Simple CSS Alignments with Flexbox
Just bear in mind that flex is not supported by IE9 and lower so you will need to use the usual hacks for ol IE.
Update: Dont forget to prefix your CSS for extra compatibility, below is the aligner code with all the prefixes you will need:
[dt_code]
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
[/dt_code]
