DIV Centrato nella pagina

[fluxKami]

Salve.
Ho un div di dimensioni variabili in base al contenuto. Vorrei che fosse sempre al centro della pagina a prescindere da quale contenuto ci venga messo dentro ed ho fatto così:

<script>
$(document).ready(function(){
    var loginheight = $("#login").height();
    var loginmargint = -loginheight/2;
    $("#login").css("margin-top", loginmargint);
    var loginwidth = $("#login").width();
    var loginmarginl = -loginwidth/2;
    $("#login").css("margin-left", loginmarginl);
});
</script>

<div id="login"><input></div>

#login {margin: auto; width: auto; position: absolute; top: 50%; left: 50%;}

Di per sé il codice funziona, ma quando accedo da mobile, se clicco sull'input per inserire del testo, compare la tastiera che stringe l'altezza dello schermo ed il div si sposta, andando a finire sopra/sotto ad altri elementi.
Ho provato anche ad inserire "transform: translate(-50%, -50%);" nel CSS ma il risultato è il medesimo.
Cosa fareste voi al posto mio?