Personally, I try to avoid lwc components as soon as custom css is involved because of restrictions imposed by shadow dom
This gist leverages the slds tabs blueprint
I simply declared the .tab-container as flex, aligned the items to center, and each li item is also self centered.
example.html
<div class="slds-tabs_default">
<ul class="slds-tabs_default__nav tab-container" role="tablist">
<li class="slds-tabs_default__item slds-is-active" title="Item One" role="presentation" onclick={tabClick}>
<a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-1" id="tab-default-1__item">Item One</a>
</li>
<li class="slds-tabs_default__item" title="Item Two" role="presentation" onclick={tabClick}>
<a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="false" aria-controls="tab-default-2" id="tab-default-2__item">Item Two</a>
</li>
</ul>
<div id="tab-default-1" class="slds-tabs_default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">Item One Content</div>
<div id="tab-default-2" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">Item Two Content</div>
</div>
(sample method to toggle css classes for activating tabs - you can easily achieve the same for the content tabs)
example.js
tabClick(e){
const allTabs = document.querySelectorAll('ul>li');
allTabs.forEach( (elm, idx) =>{
console.log(elm);
elm.classList.remove("slds-is-active")
})
e.currentTarget.classList.add('slds-is-active')
}
example.css
.tab-container {
display:flex;
align-items: center;
justify-content: center;
}
.tab-container li{
align-self: center;
}
Preview:
