How can I centre my anchor tag to make my link in the centre of the page (height and width)-CodePudding

I know this is a generic question, but I looked everywhere and couldn't find anything, here's my code :

<a href='/Customers' class='centre'>Start</a>

I tried encasing this in a div tag too but couldn't get that to work. I also want a small grey box around it as a background.

my css code:

a {
    width: 100%;
    height: 250px;
    display: inline-block;
}

.centre {
    text-align: center;
    display: inline-block;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    background-color: grey;
}

CodePudding user response：

Use flex. Also, use from 4 code lines specified for aligned vertically:

*{
  box-sizing: border-box;
}
body{
  margin: 0;
}
div{
  width: 100%;
  height: 200px;
  background-color: grey;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute; /*here*/
  top: 50%; /*here*/
  transform: translateY(-50%); /*here*/
  margin: 0; /*here*/
}


.centre {
    text-align: center;
    line-height: 150px; /*for aligning of text horizontally in anchor tag*/
    background-color: red;
    width: 90%;
    display: inline-block;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    color: white;
}

<div>
<a href='/Customers' class='centre'>Start</a>
</div>

CodePudding user response：

With your given code snippet you can do it like below. Just change display: inline-block to display: flex and add those attirbutes:

justify-content: center; align-items: center;

.linkContainer {
    display: flex;
    justify-content: center;
    width: 100%;
}

.button {
    border-radius: 5px;
    text-align: center;
    width: 75px;
    padding: 5px 10px;
    background-color: grey;
}

.button a {
    color: white;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
}

<div >
  <div ><a href="#">Start</a></div>
</div>

I did edit this code. Your link is now a "button", so it might be easier for you to understand.

But I'd recommend you to learn a bit on your own: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics