Can the buttons be in the center of the page using position:absolute;?

March 16, 2022

this is my simple html

a { text-decoration: none; }
.button-one {
    background: #edf000; /* background color */
}
.button-two {
    background: #f15640;
}
.button-three {
    background: #27c9b8;
}
.button-one,
.button-two,
.button-three {
    color: #000;
    display: inline-block;
    border-radius: 10px;
    padding: 10px 18px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.button-one:hover,
.button-two:hover,
.button-three:hover {
    background: #fff;
}

<a class="button-one" title="Relevant Title" href="#">Click Me</a>

<a class="button-two" title="Relevant Title" href="#">No Click Me</a>

<a class="button-three" title="Relevant Title" href="#">No Me LOL</a>

but when i try to add the position:absolute; The buttons become very bad

position:absolute;
top:50%;
-ms-transform:translateY(-50%);
transform:translateY(-50%);

I want the same result as the first but in the middle of the page
where is the problem?

>Solution :

You could simply wrap them inside a div and center them using flexbox. It is more easier, like so:

.links{
  display:flex;
  justify-content:center;
  gap:10px;
  /* to center vertically */
  height:100vh;
  align-items:center;
}
a { text-decoration: none; }
.button-one {
    background: #edf000; /* background color */
}
.button-two {
    background: #f15640;
}
.button-three {
    background: #27c9b8;
}
.button-one,
.button-two,
.button-three {
    color: #000;
    display: inline-block;
    border-radius: 10px;
    padding: 10px 18px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.button-one:hover,
.button-two:hover,
.button-three:hover {
    background: #fff;
}

<div class="links">
  <a class="button-one" title="Relevant Title" href="#">Click Me</a>
  <a class="button-two" title="Relevant Title" href="#">No Click Me</a>
  <a class="button-three" title="Relevant Title" href="#">No Me LOL</a>
</div>