HTML, CSS - Aligning Buttons To The Center Of Page

Question

I want to align some buttons to the center of the page. May I please know how can I do it here in my CSS.

button {
  background-color: #6495ED;
  color: white;
  padding: 16px 25px;
  margin: 0 auto;
  border: none;
  cursor: pointer;
  width: 100%;
  border-radius: 8px;
  display: block;
  position: middle;
}

<button type="button" onclick="document.getElementById('id01').style.display='block'" style="width: auto;">User Login</button>
<br><br><br>
<button type="button" onclick="document.getElementById('id02').style.display='block'" style="width:auto; ">Admin Login</button>

kukkuz · Accepted Answer · 2017-09-16T14:22:56.423

If flexbox is an option, you can add this:

body {
  margin: 0;
  height: 100vh; // stretch body to the whole page
  display: flex; // define a flex container
  flex-direction: column; // arrange items in column
  justify-content: center; // align vertically center
}

(Note that position: middle is invalid)

See demo below:

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

button {
  background-color: #6495ED;
  color: white;
  padding: 16px 25px;
  margin: 0 auto;
  border: none;
  cursor: pointer;
  width: 100%;
  border-radius: 8px;
}

<button type="button" onclick="document.getElementById('id01').style.display='block'" style="width: auto;">User Login</button>
<br><br><br>
<button type="button" onclick="document.getElementById('id02').style.display='block'" style="width:auto; ">Admin Login</button>

ok, so I guess I need to be more responsible with my answers... I answered a common duplicate... you have your answer in the duplicate that I've tagged except that you need to specify the `flex-direction` as `column`... :) — kukkuz, Sep 16 '17 at 15:15

score 3 · Answer 2 · edited Dec 10 '17 at 18:37

If you don't want to use Flexbox just wrap your buttons in a div and set it's position to absolute, top to 50%, left to 50% and transform to translate(-50%, -50%), also give the parent or the body element position relative.

Note that the body or parent that contains the .buttons-holder has to be of defined height.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  position: relative;
}

.buttons-holder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

button {
  background: #6495ED;
  color: white;
  padding: 16px 25px;
  margin: 15px auto;
  border: none;
  cursor: pointer;
  width: 100%;
  border-radius: 8px;
  display: block;
}

<div class="buttons-holder">
  <button type="button" onclick="document.getElementById('id01').style.display='block'" style="width:auto">User Login</button>
  <button type="button" onclick="document.getElementById('id02').style.display='block'" style="width:auto">Admin Login</button>
</div>

HTML, CSS - Aligning Buttons To The Center Of Page

2 Answers2