button not being centered horizontally despite applying correct CSS rule

I went on W3 school website where they say that in order to center an element horizontally I must set the margin to 0 and set the width to any value but 100%. Which I did. I mean I set the width to 50%. Yet my button isn't centered. Help please. Also if you know how to center an element vertically too, please drop me a line.

const image = document.getElementById("image");
const btn = document.getElementById("btn");
const people = ["pierre", "paul", "jacques", "henry" ];
const date = new Date().getDay();
const daysOfWeek = Array.from({length: 7}, (item, i) => {
  return new Date(0,0,i).toLocaleDateString("en-US", {weekday: "long"})
})
var today = daysOfWeek[date];
const names = {
  "Monday": "emilie",
  "Tuesday": "emilie",
  "Wednesday": "jessica",
  "Thursday": "jessica",
  "Friday": "paul",
  "Saturday": "paul",
  "Sunday": "pierre",
}

btn.addEventListener("click", function() {
  date >= 0 && date < 2 ? personPaying = `today is ${today} so ${names[today]} is footing the bill`
  : date >= 2 && date < 4 ? personPaying = `today is ${today} ${names[today]} is paying`
  : date >= 4 && date < 6 ?   personPaying = `Hi ${names[today]}, today is ${today} so although we are in Amsterdam we're not going ducth`
  : personPaying = `Hi ${names[today]}, today is ${today}, your turn to pay today`

  btn.style.display = "none";

  <!-- message to the person paying -->
  let message = document.getElementsByClassName("message")[0];
  message.style.display = "block";
  message.textContent = personPaying;

  <!--avatar of person paying -->
  image.src = `picture/${names[today]}.png`;
  image.alt = "picture of an avatar";

  <!--displaying <i/> tags -->
  var unseenArray = [...document.getElementsByClassName("unseen")]
  unseenArray.map(x => x.style.display = "inline");

  <!--displaying containers and setting height -->
  let containers = document.getElementsByClassName("containers");
  for (var i = 0; i < containers.length; i++) {
    containers[i].style.display = "block";
  }
  for (var i = 0; i < containers.length; i++) {
    containers[i].style.height = "920px";
  }

  <!-- floating divs with class container to left -->
  for(var i = 0; i < containers.length; i++) {
    containers[i].style.cssFloat = "left"
  }
  document.getElementsByTagName("h1")[0].textContent = `Hi ${names[today]} select you mehtod of payment`
}, false);
button {
  box-shadow: 5px 10px;
  font-family: 'Krona One', "sans-serif";
  font-size: 30px;
  font-weight: light;
  padding: 10px;
  transition: 0.5s;
  width: 50%;
  margin: auto;

}

button:hover {
  box-shadow: 5px 10px;
}

body {
background-color: rgb(180, 180, 180);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
background-size: auto;
}

.message {
  border-style: inset;
  border-width: medium;
  border-radius: 15px;
  box-shadow: 5px 10px;
  display: none;
  padding: 20px;
  text-align: center;
  background-color: rgb(250, 250, 250);
  font-family: "Copperplate", "Papyrus", "fantasy";
  font-size: 50px;
  font-variant: "small-caps";
  margin: 100px 50px 75px 100px;
}

div.containers {
  width: 400px;
  height: 400px;
  margin: 50px;
  display: none;
}


i.unseen {
  display: none;
  max-width: 100px;
  margin-top: 15px;
}

img {
  box-shadow: 5px 10px;
  width: 30%;
  float: right;
  top: 0px;
}

h1 {
  font-family: "Copperplate", "Papyrus", "fantasy";
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Who's buying today</title>
    <link rel="stylesheet" href="index.css">
    <link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Krona+One&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/2da085e01f.js" crossorigin="anonymous"></script>


  </head>
  <body>
    <button id="btn" type="submit">who's paying</button>
    <div class="containers">
      <div class="message"></div>
      <img id="image" src="">
    </div>

    <div class="containers">
      <h1></h1>
      <a href="form.html"><i class="fab fa-cc-visa unseen"></i></a>
      <i class="far fa-money-bill-alt unseen"></i>
    </div>

    <script src="index.js" type="text/javascript"></script>
  </body>
</html>



Read more here: https://stackoverflow.com/questions/67391167/button-not-being-centered-horizontally-despite-applying-correct-css-rule

Content Attribution

This content was originally published by Josué at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: