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

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

Possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — BSMP, Nov 21 '16 at 21:11
See https://css-tricks.com/centering-css-complete-guide/ and http://thenewcode.com/723/Seven-Ways-of-Centering-With-CSS — Ted Whitehead, Nov 21 '16 at 21:11

score 1 · Accepted Answer · answered Nov 21 '16 at 21:16

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.

answered Nov 21 '16 at 21:16

Phiroze Noble

183
9

score 0 · Answer 2 · answered Nov 21 '16 at 21:12

0

In the CSS put:

margin: 0 auto;

answered Nov 21 '16 at 21:12

Eli Kerrison-Male

60
1
10

Change the zero to change the margin on the top and bottom. – Eli Kerrison-Male Nov 21 '16 at 21:14
If you use this method make sure you put in on the div. not on the button. – Eli Kerrison-Male Nov 21 '16 at 21:18

score 0 · Answer 3 · answered Nov 21 '16 at 21:13

0

.center {
  text-align: center;
}

<div class="center">

  <button>click me!</button>

</div>

answered Nov 21 '16 at 21:13

Gustavo Gonzalez

46
1

score 0 · Answer 4 · answered Nov 21 '16 at 21:15

0

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.

answered Nov 21 '16 at 21:15

score 0 · Answer 5 · answered Nov 22 '16 at 01:11

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;
}

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

5 Answers5