title: I cannot center my button and don't know why
body: <p>I tried to put a button in the center of my div but I couldn't though all my other contents are centered.</p>
  <p><strong>My code:</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a id="middle"&gt;
    &lt;div class="middle"&gt;
  &lt;/a&gt;
  &lt;section&gt;
    &lt;a href="#top"&gt;&lt;button class="upbutton"&gt;&lt;img src="img/arrow.png"&gt;&lt;/button&gt;&lt;/a&gt;
    &lt;h1&gt;content&lt;/h1&gt;
    &lt;ul&gt;
      &lt;li&gt;content&lt;/li&gt;
      &lt;li&gt;content&lt;/li&gt;
      &lt;li&gt;content&lt;/li&gt;
    &lt;/ul&gt;
    &lt;p&gt;...and more&lt;/p&gt;
  &lt;/section&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I also searched on this problem and tried to put this into the .upbutton class:
  <pre><code>margin:0;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%); 
  </code></pre>
   <p> and it centered my button. But when I hover, it didn't center anymore.</p>
  <p>I don't know why I'm kinda new to this. Can anyone explain and help me, tks a lot!</p>