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

Question

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?

Youssouf Oumar · Accepted Answer · 2022-03-16T10:46:37.457

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>

score 1 · Answer 2 · answered Mar 16 '22 at 10:41

If you want them to be in the center of the page like in the middle of the screen (if this is what you had in mind), you can use flex for that and vh for element height, like this:

.links {
  height: 100vh;
  display: flex;
  justify-content: center;
  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>

score 0 · Answer 3 · answered Mar 16 '22 at 10:35

This will work as well.

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;
}

.center-buttons {
    display:flex;
    justify-content:center;
    }

<div class="center-buttons">
<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>

score 0 · Answer 4 · answered Mar 16 '22 at 10:41

Wrapp anchor tags in a .container then use position: absolute and width: max-content for that:

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
}

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="container">
  <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>

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

4 Answers4