How do i center align these tabs?

<div class="howDoesItWork">
      <h1 class="title-header-1" >How does it work?</h1>
      <div data-tabs class="tabs">
         <div class="tab">
            <input type="radio" name="tabgroup" id="tab-1" checked>
            <label for="tab-1"  class="tabx">Paying Out</label>
            <div class="tab__content">
              <div class="howDoesItWorkIcons">
                 <div class="mainIcons">
                   <img src="../img/create transaction.svg" class="imageicons" alt="create transaction">
                   <p class="iconText">You create the Transaction, fund it, tell us the type of item and the delivery date and who the seller is.</p>
                 </div>
         <div class="mainIcons">
                   <img src="../img/safe x.svg" class="imageicons" alt="Money in safe">
                   <p class="iconText">We lock your funds in our safe, we contact the seller and validate their identity.</p>
                 </div>

                 <div class="mainIcons">
                   <img src="../img/cash out and delivery.svg" class="imageicons" alt="Pay out">
                   <p class="iconText">After the delivery is made, you and the seller will exhange your delivery confirmation codes. Then the seller gets paid</p>
                 </div>
              </div>
            </div>
         </div>
         <div class="tab">
            <input type="radio" name="tabgroup" id="tab-2">
            <label for="tab-2" class="taby">Getting Paid</label>
            <div class="tab__content">
              <div class="howDoesItWorkIcons">
                  <div class="mainIcons">
                    <img src="../img/request order seller.svg" class="imageicons" alt="seller request order">
                    <p class="iconText">You create the Transaction, tell us the type of item and the delivery date and who the buyer is. A link is generated which you can send to the buyer.</p>
                  </div>

                  <div class="mainIcons">
                  <img src="../img/safe x.svg" class="imageicons" alt="Money in Safe">
                    <p class="iconText">We reach out the buyer and lock their funds in our safe, and contact you so that you know that we have secured their funds.</p>
                  </div>

                  <div class="mainIcons">
                    <img src="../img/cash out and delivery.svg" class="imageicons" alt="Cash our and delivery">
                    <p class="iconText">After you’ve made the delivery, you and the buyer exchange your delivery confirmation codes and the funds are moved to your account.</p>
                  </div>
              </div>
            </div>
         </div>
</div>
</div>  

.tabs {
    clear: both;
    position: relative;
   margin: 0 auto;
}

.tab {
    float: left;
}

.tab label {
    margin-right: 20px;
    top: 0;
    cursor: pointer;
    color: #ffffff;
}

.tab [type=radio] {
    display: none;
}

.tab__content {
   position: relative;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    transition: opacity .2s cubic-bezier(.42,0,.34,1.01);
    opacity: 0;
}
[type=radio]:checked ~ label {
    border-bottom: 2px solid #ffffff;
    color: #ffffff;
    z-index: 2;
}
[type=radio]:checked ~ label ~ .tab__content {
    z-index: 1;
    opacity: 1;
}

(function($, document) {

      // get tallest tab__content element
      let height = -1;

        $('.tab__content').each(function() {
            height = height > $(this).outerHeight() ? height : $(this).outerHeight();
         $(this).css('position', 'absolute');
        });

      // set height of tabs + top offset
        $('[data-tabs]').css('min-height', height + 40 + 'px');

} (jQuery, document));