title: How to center tabs with CSS and JavaScript?
body: <p>I want to create a centered tabs on my web page. I tried several solutions found on this site but it does not work well with me. </p>
  
  <p>I used the tabs as buttons and It is a full page tabs. 
  My code is simple and I also added comments to better understand.
  Here is my snippet code below I hope you will help me.</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-js lang-js prettyprint-override"><code>function openPage(evt, pageName) {
      // Declare all variables
      var i, tabcontent, tablinks;
      // Get all elements with class="tabcontent" and hide them
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i &lt; tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
      }
  
      // Get all elements with class="tablinks" and remove the class "active"
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i &lt; tablinks.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
  
      // Show current tab, and add an "active" class to the button that opened the tab
      document.getElementById(pageName).style.display = "block";
      evt.currentTarget.className += " active";
  }
  
  document.getElementById("defaultOpen").click();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Full page tabs */
  body,html {
      height: 100%;
      margin: 0;
      font-family: Arial;
  }
  /* Style the tab */
  .tab {
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #03A9F5;
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
  }
  /* Style the buttons */
  .tab button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
      width: 24%;
  }
  /* Background color of buttons on hover */
  .tab button:hover {
      background-color: #ddd;
  }
  
  /* Create an active/current tablink class */
  
  .tab button.active {
      border-bottom: 3px solid #FFFFFF;
      color: #E1FBFF;
  }
  /* Style the tab content */
  .tabcontent {
      display: none;
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-top: none;
      background-color: #EEEEEE;
      height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Tab links --&gt;
  &lt;div class="tab"&gt;
    &lt;button id="defaultOpen" class="tablinks" onclick="openPage(event, 'tab1')"&gt;TAB1&lt;/button&gt;
    &lt;button class="tablinks" onclick="openPage(event, 'tab2')"&gt;TAB2&lt;/button&gt;
    &lt;button class="tablinks" onclick="openPage(event, 'tab3')"&gt;TAB3&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;!-- Tab content --&gt;
  &lt;div id="tab1" class="tabcontent"&gt;
    &lt;h3&gt;Tab1&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div id="tab2" class="tabcontent"&gt;
    &lt;h3&gt;Tab2&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div id="tab3" class="tabcontent"&gt;
    &lt;h3&gt;Tab3&lt;/h3&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>