Today we’re going to look at two ways that you can vertically align elements inside their parent container.
The first technique, by Sebastian Ekström, uses nothing but good old CSS. The key to this one is the CSS transform property, as seen below:
This method has decent browser support; it even works in Internet Explorer 9 (providing you include the appropriate vendor prefixes). If you’re using autoprefixer in your gulp task (as I do), then vendor prefixes are all taken care of!
The original source of this technique also includes an update that sets transform-style on the parent element, to prevent the element being vertically aligned from sitting on a half pixel and looking blurry. Nice!
The second technique we’re going to look at, involves a neat little jQuery plugin from Paul Sprangers, called jQuery Flex Vertical Center. You simply include flexverticalcenter.js in your web page, along with a single line of jQuery in your scripts file, as seen below: