How to vertically center in yui-pure-css?

Question

I use purecss (purecss.io), which works fantastic so far, but I haven't managed to vertically center anything in their responsive grid.

I have a div (class="pure-u-1-3") with automatically has the height of it's parents element. I would like to vertically center a form (tried wrapping in a div too) inside this. I tried everything I found on StackOverflow and many other sources online. Unfortunately it seems that pure-css is destroying it.

Any ideas?

Answer 1

.pure-g-valign-fix{display:block;}

Use class above to fix the vertical align issue with PureCSS in it's grids. Use CSS class alongside the pure-g class like so:

<div class="pure-g pure-g-valign-fix">

Doing this will bring back normal CSS behaviour for that row.