how to change the postion of the enter button to the centre of the page?-CodePudding

How to get the button from the top corner to the centre of the page

.button {
  background-color: rgb(168, 229, 70);
  width: 200px;
  font-size: 20px;
  padding: 5px;
  border-radius: 5px;
  border: 3px solid yellow;
  color: white;
  text-align: center;
}

<a href="">
  <div >enter</div>
</a>
<!--insert a link that take to a page that has info about the developers
    -->

i have no idea what to try?

CodePudding user response：

adding this should do the trick

    .button {
      display: block;
      margin: auto; }

CodePudding user response：

This will make your button come into the center of the page.

.center{
  height : 100vh;
  width : 100vw;
  display : grid;
  align-items : center;
  justify-content : center;
}

<div >
<button><a href="https://stackoverflow.com">Hi There</a></button>
</div>

CodePudding user response：

You can add this:

.button {

  margin: auto;

}

or this :

.button {
    margin-left:25%;
    margin-right:25%;
}

CodePudding user response：

You can use display grid for that. Give display grid to the parent element and set place items center, it will make all child elements align center. You can see code below with snippets. Thank You !!

@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800;900&display=swap');

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body{
  font-family: "Urbanist", sans-serif;
  background-color: #000000;
}

html{
  scroll-behavior: smooth;
}

.main-box{
  display: grid;
  place-items: center;
  padding: 50px 0;
}

a{
  background-color: #0091ff;
  color: #ffffff;
  text-decoration: none;
  padding: 10px 30px;
  border-radius: 4px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div >
   <a href="#">Enter</a>
  </div>
</body>

</html>

CodePudding user response：

.button {
  background-color: rgb(168, 229, 70);
  width: 200px;
  font-size: 20px;
  padding: 5px;
  border-radius: 5px;
  border: 3px solid yellow;
  color: white;
  text-align: center;
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%)
}

<a href="">
  <div >enter</div>
</a>
<!--insert a link that take to a page that has info about the developers
    -->