HTML CSS - How to put button at the center of my page - html

Question

How can I put my button at the center of my page?
My button is in a div. I wanted to change the background of the div and put everything at the center of the page, like a login page.
My code:
.serverPW{
font: 18px Arial;
font-color: black;
}
.serverPwClass {
-moz-box-shadow:inset 0px 1px 3px 0px #91b8b3;
-webkit-box-shadow:inset 0px 1px 3px 0px #91b8b3;
box-shadow:inset 0px 1px 3px 0px #91b8b3;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #44b395), color-stop(1, #6c7c7c));
background:-moz-linear-gradient(top, #44b395 5%, #6c7c7c 100%);
background:-webkit-linear-gradient(top, #44b395 5%, #6c7c7c 100%);
background:-o-linear-gradient(top, #44b395 5%, #6c7c7c 100%);
background:-ms-linear-gradient(top, #44b395 5%, #6c7c7c 100%);
background:linear-gradient(to bottom, #44b395 5%, #6c7c7c 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#44b395', endColorstr='#6c7c7c',GradientType=0);
background-color:#44b395;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #566963;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:11px 23px;
text-decoration:none;
text-shadow:0px -1px 0px #2b8a7c;
top: 50%;
left: 50%;
}
.serverPwClass:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #6c7c7c), color-stop(1, #44b395));
background:-moz-linear-gradient(top, #6c7c7c 5%, #44b395 100%);
background:-webkit-linear-gradient(top, #6c7c7c 5%, #44b395 100%);
background:-o-linear-gradient(top, #6c7c7c 5%, #44b395 100%);
background:-ms-linear-gradient(top, #6c7c7c 5%, #44b395 100%);
background:linear-gradient(to bottom, #6c7c7c 5%, #44b395 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c7c7c', endColorstr='#44b395',GradientType=0);
background-color:#6c7c7c;
}
.serverPwClass:active {
position:relative;
top:1px;
}
<div class="serverPW">
<label>Server password</label>
<form id ServerLogin>
<input id= "serverPassword" type="password" class= "serverPwClass" placeholder="Password">
</form>
</div>
JSFiddle

Answer 1

Simple way to do it:
.button {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
max-width: 400px;
}
This will horizontally and vertically align your button.

Answer 2

In the CSS put:
margin: 0 auto;

Answer 3

.center {
text-align: center;
}
<div class="center">
<button>click me!</button>
</div>

Answer 4

For future reference, please put JSFiddle in answer, but here you go:
.serverPW{
position: absolute;
height: 100%;
font: 18px Arial;
font-color: black;
text-align: center;
}
That should work.

Answer 5

Well... you could just use the 'center' tag in your HTML but then, it'd mess up the page, at least that's what happened in my experience.
Use the following code in CSS for the button.
.button{
position: absolute;
height: 100%;
font-size: 18px;
color: black;
text-align: center;
}