Search code examples
cssyui-pure-css

How to vertically center in yui-pure-css?

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?

Solution 
  • .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.