Ho questo: http://s18.postimg.org/e488xyld5/panel.png

Solo che il bottone "accedi" non è disposto correttamente perchè mi si sposta al ridimensionamento della pagina.

Ho utilizzato display: table per allineare il tutto al centro:
codice HTML:
<style type="text/css">
    html, body {
      height: 100%;
    }

    #login {
      height: 100%;
      width: 100%;
      display: table;
    }

    #login-table {
      display: table-cell;
      height: 100%;
      vertical-align: middle;
    }

    .login-row {
      width: 30%;
    }
    @media all and (max-width:800px) {
      .login-row {
        width: 90%;
      }
    }
  </style>
  <div id="login">
    <div id="login-table" align="center">
      <div class="login-row">
        <input type="text" name="nickname" id="nickname" placeholder="Nickname" autocomplete="off" autofocus />
      </div>
      <div class="login-row">
        <input type="password" name="password" id="password" placeholder="Password" autocomplete="off" />
      </div>
      <div class="login-row">
        <button id="signin-form" class="right">Accedi <i class="fi-arrow-right"></i></button>
      </div>
    </div>
  </div>
Non utilizzo framework (se non per le icone) quindi il class="right" non è di aiuto in questo caso.

Grazie.