How to center-align jQuery UI tabs - with screenshot

.ui-tabs .ui-tabs-nav {
  text-align: center;
}

.ui-tabs .ui-tabs-nav li {
  float: none !important;
  display: inline-block;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  margin-bottom: -8px;
}

.ui-tabs .ui-tabs-nav li {
  margin: 1px .2em -7px 0;
}

The easiest way is to apply text-align: center on the container (the UL element) and unfloat the LI:

.ui-tabs .ui-tabs-nav {
    text-align: center;
}

.ui-tabs .ui-tabs-nav li {
    float: none !important;
    display: inline-block;
}

This snipped help me out back in the days..

.centered .ui-tabs-nav {
    height: 2.35em;
    text-align: center;
}
.centered .ui-tabs-nav li {
    display: inline-block;
    float: none;
    margin: 0em;
}

maybe this works for you too

This worked for me and avoided the gap (underneath the tabs) you mentioned:

.ui-tabs-nav {
  float: none; text-align: center;  
}

.ui-tabs-nav li {
  display: inline-block; float: none;  
}

.ui-tabs-nav li a {
  float: none;
}