Html - Positionierung

[ma8391]

Hallo,
ich habe folgendes Problem: Auf meiner Startseite sollen zwei Button mit jeweiligem Text darunter nebeneinander und mittig erscheinen. Dies funktioniert auch soweit, doch wenn ich die Auflösung des Rechners ändere, dann verschieben die sich. Meine Frage nun, was kann ich in meinem Code besser machen, damit das nicht passiert oder es sich nicht so schlimm verschiebt?
Danke für die Antworten.

<div class="login">
        <form action="login.php">
            <input     class='Button' type="submit" value="Log in">
        </form>
        <p class='Text1'>Text....</p>
</div>

<div class="register">
        <form action="register.php">
            <input     class='Button' type="submit" value='register'>
        </form>
        <p class='Text1'>Text.....</p>    
 </div>
 

 div.login{ text-align:center; position: absolute; top: 29%; right:27%}

div.register {text-align:center; position: absolute; top: 29%; left:27%}

.Button {Background-color: #6CB6FF; font-family:Bradley Hand ITC; font-size: 24; font-weight: bold}

 

[3UGENE]

<div class="login">
 <form action="login.php">
  <input class='Button' type="submit" value="Log in">
 </form>
 <p class='Text1'>Text....</p>
</div>
<div class="register">
 <form action="register.php">
  <input class='Button' type="submit" value='register'>
 </form>
 <p class='Text1'>Text.....</p>
</div>

 div.login{ text-align:center; position: absolute; top: 29%; margin-left: auto}

div.register {text-align:center; position: absolute; top: 29%; margin-right: auto;}

.Button {Background-color: #6CB6FF; font-family:Bradley Hand ITC; font-size: 24; font-weight: bold}

 

[ma8391]

Hallo,
wenn ich das jetzt ändere, liegen beide <div> am linken Bildschirmrand übereinander.
Hier nochmal der abgeänderte Code.

div.login{ text-align:center; position: absolute; top: 29%; margin-left: auto}
/**/
div.register {text-align:center; position: absolute; top: 29%; margin-right: auto}