CSS-Code, um die Schaltfläche auf horizontal und vertikal zu zentrieren

Question

Ich versuche herauszufinden, wie diese Schaltfläche, die ich erstellt habe, genau in der Mitte der Seite (vertikal und horizontal) zu bekommen. Ich habe es auf der horizontalen Ebene zentriert, aber nicht auf der vertikalen Ebene. Jede Hilfe wäre willkommen!

input#gobutton{ 
position: relative; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%) 
cursor:pointer; 
padding:5px 25px; 
background:#87CEFA; 
border:1px solid #1E90FF; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 
-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75); 
-moz-box-shadow: 0 0 4px rgba(0,0,0, .75); 
box-shadow: 0 0 4px rgba(0,0,0, .75); 
color:#f3f3f3; 
font-size:1.1em; 
} 

Answer 1

Position zu absolut oder fest ändern.

Answer 2

Eingabe

Textausrichtung: Mitte; Polsterung: 50px 0;

Answer 3

Ich bin mir nicht sicher, ob es das, was Sie brauchen, aber zu diesem JSFiddle example einen Blick darauf werfen.

Die CSS-I verwendet wird:

input#gobutton{ 
    position: relative; 
    display: block; 
    margin: auto; 
    top: 40%; 
    cursor:pointer; 
    padding:5px 25px; 
    background:#87CEFA; 
    border:1px solid #1E90FF; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    -webkit-box-shadow: 0 0 4px rgba(0,0,0, .75); 
    -moz-box-shadow: 0 0 4px rgba(0,0,0, .75); 
    box-shadow: 0 0 4px rgba(0,0,0, .75); 
    color:#f3f3f3; 
    font-size:1.1em; 
}