title: How to Center Radio Button
body: <p>For my webpage I am using radio buttons to make tabs with content on the top of my webpage. I want the tabs to be centered in the screen. I tried to use display: flex and text-align: justify but it didn't work. Is there a simple way to center the radio buttons? Any help would be appreciated.</p>
  
  <p>Here is the HTML</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="allTabs"&gt;
    &lt;div class="tab"&gt;
      &lt;input type="radio" id="tab-1" name="tab-group-1" checked&gt;
      &lt;label for="tab-1"&gt;Tab One&lt;/label&gt;
        &lt;div class="content"&gt;
           stuff 1
        &lt;/div&gt; 
    &lt;/div&gt;
    &lt;div class="tab"&gt;
      &lt;input type="radio" id="tab-2" name="tab-group-1"&gt;
      &lt;label for="tab-2"&gt;Tab Two&lt;/label&gt;  
      &lt;div class="content"&gt;
         stuff 2
      &lt;/div&gt; 
    &lt;/div&gt; 
    &lt;div class="tab"&gt;
      &lt;input type="radio" id="tab-3" name="tab-group-1"&gt;
      &lt;label for="tab-3"&gt;Tab Three&lt;/label&gt;
      &lt;div class="content"&gt;
         stuff 3
      &lt;/div&gt; 
    &lt;/div&gt; 
  </code></pre>
  
  <p>
  </p>
  
  <p>Here is the CSS</p>
  
  <pre><code>.tabs {   
    min-height: 200px; /* This part sucks */
    clear: both;
  }
  .tab {
    float: left;
  }
  .tab label {
    background: white; 
    padding: 10px; 
    border: 1px solid #ccc; 
    margin-left: -1px; 
    position: relative;
    left: 1px;
  }
  .tab [type=radio] {
    display: none;   
  }
  .content {
    position: absolute;
    top: 28px;
    left: 0;
    background: white;
    right: 0;
    bottom: 0;
    padding: 20px;
    border-top: 4px solid #DADEDE;
    margin-top: 4px;
  }
  [type=radio]:checked ~ label {
    background: white;
    padding-bottom: 0px;
    border-bottom: 4px solid blue;
    margin-bottom: 5px;
    z-index: 2;
  }
  [type=radio]:checked ~ label ~ .content {
    z-index: 1;
  }
  </code></pre>
  
  <p>Here is the JSFiddle <a href="https://jsfiddle.net/mk8r6kL0/" rel="nofollow">https://jsfiddle.net/mk8r6kL0/</a></p>