按鈕可以使用位置：絕對；位于頁面中心嗎？[復制]

這是我的簡單 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>

但是當我嘗試添加位置時：絕對；按鈕變得非常糟糕

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

我想要與第一個相同的結果，但在頁面中間哪里有問題？

uj5u.com熱心網友回復：

您可以簡單地將它們包裝在 adiv中并使用flexbox. 它更容易，如下所示：

.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>

uj5u.com熱心網友回復：

這也將起作用。

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>

uj5u.com熱心網友回復：

.container在then 使用中包裝錨標簽position: absolute并width: max-content為此：

.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>

uj5u.com熱心網友回復：

如果您希望它們像在螢屏中間一樣位于頁面的中心（如果這是您的想法），您可以使用 flex 和 vh 作為元素高度，如下所示：

.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>

標籤：html css

上一篇：我們如何使用css水平對齊文本？

下一篇：將2個div（不同寬度）與flexbox列垂直對齊