title: How to center accordion in HTML / CSS
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  
  button.accordion
  {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 10px;
      width: 12%;
      text-align: middle;
      border: none;
      outline: none;
      font-size: 15px;
      transition: 0.4s;
  }
  
  button.accordion.active, button.accordion:hover {
      background-color: #ddd;
  }
  
   div.panel {
      padding: 0 10px;
      background-color: White;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;center&gt;&lt;h2&gt;Alcohol&lt;/h2&gt;&lt;/center&gt;
  &lt;center&gt;&lt;p&gt;Click on the buttons to open the information.&lt;/p&gt;&lt;/center&gt;
  
  &lt;button class="accordion"&gt;Beer&lt;/button&gt;
  &lt;div class="panel"&gt;
    &lt;p&gt; Beer&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;button class="accordion"&gt;Wine&lt;/button&gt;
  &lt;div class="panel"&gt;
    &lt;p&gt;Wine&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;button class="accordion"&gt; Wiskey&lt;/button&gt;
  &lt;div class="panel"&gt;
    &lt;p&gt;Wiskey&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  var acc = document.getElementsByClassName("accordion");
  var i;
  
  for (i = 0; i &lt; acc.length; i++) {
    acc[i].onclick = function()
    {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight){
       panel.style.maxHeight = null;
      } else {
       panel.style.maxHeight = panel.scrollHeight + "px";
      } 
    }
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Hey I was wondering if someone can help me center the accordion.
  I can center the text  in the middle by using <code>middle</code> / <code>center</code>, but I can not seem to center the accordion. I tried using: <code>left: 50%</code> and <code>right: 50%</code> and some more options but none of them worked.</p>