我无法将按钮居中，不知道为什么

Question

我试图在 div 的中心放置一个按钮，但我不能，尽管我的所有其他内容都居中。

我的代码：

.middle {
  width: 100%;
  height: auto;
  text-align: center;
  position: relative;
}

.middle section {
  padding: 18vh 6%;
  line-height: 0.5;
  color: #EE6352;
  font-weight: 400;
  font-size: calc(16px + 3vw);
}

.middle ul {
  text-align: left;
}

.middle li {
  font-size: calc(12px + 2vw);
  line-height: 1.25;
  color: #2A2D34;
}

.middle p {
  font-size: calc(14px + 2.4vw);
  font-weight: 400;
  color: #2A2D34;
}

.upbutton {
  padding: 10px;
  background: #1ac6ff;
  border-radius: 50%;
  border-style: none;
  cursor: pointer;
  position: absolute;
  top: 0px;
  transition: background 0.3s;
  box-shadow: 2px 2px 5px rgba(102, 102, 102, 0.5);
}

.upbutton img {
  width: 25px;
  height: 25px;
}

.upbutton:hover {
  background: #00ace6;
  -webkit-transform: scale(0.94);
  -ms-transform: scale(0.94);
  transform: scale(0.94);
}

.upbutton:active {
  background: #0086b3;
}

<a id="middle">
  <div class="middle">
</a>
<section>
  <a href="#top"><button class="upbutton"><img src="img/arrow.png"></button></a>
  <h1>content</h1>
  <ul>
    <li>content</li>
    <li>content</li>
    <li>content</li>
  </ul>
  <p>...and more</p>
</section>
</div>

我也搜索过这个问题，并试图将其放入 .upbutton class：

margin:0;
-ms-transform: translateX(-50%);
transform: translateX(-50%);

它使我的按钮居中。但是当我悬停时，它不再居中了。

我不知道为什么我对此有点陌生。任何人都可以解释并帮助我，非常感谢！

Answer 1

<head>
    <style>
        .middle
        {
        width: 100%;
        height: auto;
        text-align: center;
        position: relative;
        }
        .middle section
        {
          padding: 18vh 6%;
          line-height: 0.5;
          color: #EE6352;
          font-weight: 400;
          font-size:calc(16px + 3vw);

        }
        .middle ul
        {
          text-align: left;
        }
        .middle li
        {
          font-size: calc(12px + 2vw);
          line-height: 1.25;
          color: #2A2D34;
        }
        .middle p
        {
          font-size: calc(14px + 2.4vw);
          font-weight: 400;
          color: #2A2D34;
        }
        .upbutton
        {
          padding: 10px;
          background: #1ac6ff;
          border-radius: 50%;
          border-style: none;
          cursor: pointer;
          position: absolute;
          top:50%;
          left:50%;
          transition: background 0.3s;
          box-shadow: 2px 2px 5px rgba(102, 102, 102, 0.5);
        }
        .upbutton img{width: 25px;height: 25px;}
        .upbutton:hover{ background: #00ace6;
          -webkit-transform: scale(0.94);
                -ms-transform: scale(0.94);
                transform: scale(0.94); }
        .upbutton:active{background: #0086b3;}
    </style>
    </head>
    <a id="middle"><div class="middle"></a>
          <section>
          <a href="#top"><button class="upbutton"><img src="https://png.pngtree.com/png-vector/20190419/ourmid/pngtree-vector-up-arrow-icon-png-image_956434.jpg"></button></a>
          <h1>content</h1>
          <ul>
          <li>content</li>
          <li>content</li>
          <li>content</li>
          </ul>
          <p>...and more</p>
          </section>
          </div>

在此示例中，您可以只使用 'position': absolute 和 top:50%,left:50%

Answer 2

尝试直接在 HTML 中执行此操作。编辑：尝试使用 JS。

<center><button onclick = "goToTop()" id = "buttonId"><img src="img/arrow.png"></img></button></center>
<script>
function goToTop(){
var currentLink = window.location.href;
window.location = currentLink+'#top';
}
</script>

如果这对您不起作用，请告诉我，我会尽力解决。另外，如果这对您有用，请接受。它适用于 Chrome。

Answer 3

如果您想将其居中，只需添加

top: 50%; property to the .upbutton class

Answer 4

记得添加一个转换：translateX(-50%)；在按钮的 :hover 选择器上，这样它就不会返回。如果您在悬停时更改变换属性，它会覆盖现有变换，因此它会返回到 translateX(0)

    .upbutton:hover {
  background: #00ace6;
  -webkit-transform: translateX(-50%) scale(0.94);
  -ms-transform: translateX(-50%) scale(0.94);
  transform: translateX(-50%) scale(0.94);
}

我无法将按钮居中，不知道为什么

I cannot center my button and don't know why

html

css

center

button