Bootstrap 5 Update (2021)

The Navbar in Bootstrap still utilizes flexbox for alignment, maintaining the same functionality as in Bootstrap 4.

Bootstrap 4.1+ Update

In Bootstrap 4, the navbar has transitioned to using flexbox for easier alignment. The Website Name can now be centered by applying mx-auto. No longer is it necessary to use floats for the left and right side menus.

<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Download</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Register</a>
            </li>
        </ul>
        <ul class="nav navbar-nav mx-auto">
            <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
        </ul>
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Rates</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Help</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

Demo of Centering Navbar with mx-auto

If there's only one navbar-nav within the Navbar, you can utilize justify-content-center for centering as well.

UPDATE

In the previous solution, the Website Name is centered in relation to the adjacent left and right navbar-nav, which may cause misalignment if their widths differ.

https://i.sstatic.net/FBwa6.png

To address this issue, one workaround for achieving absolute centering in flexbox can include...

Option 1 - Use position:absolute;

It's acceptable to employ absolute positioning alongside flexbox to center the desired item.

.abs-center-x {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Demo of Centering Navbar with absolute position

Option 2 - Utilize flexbox nesting

Alternatively, you can make the centered item a d-flex element for center justification. Each navbar component would then need flex-grow:1.

Beginning with Bootstrap 4 Beta, the Navbar now adopts display:flex. In Bootstrap 4.1.0, a new class called flex-fill is introduced to ensure each nav section fills the width:

<nav class="navbar navbar-expand-sm navbar-dark bg-dark main-nav">
    <div class="container justify-content-center">
        <ul class="nav navbar-nav flex-fill w-100 flex-nowrap">
            ...

Demo of Centering Navbar with flexbox nesting

Prior to Bootstrap 4.1.0, you could add the flex-fill class like so...

.flex-fill {
   flex:1
}

Starting from version 4.1, flex-fill is integrated into Bootstrap.

Explore More Navbar Centering Demos in Bootstrap 4
Additional Centering Demonstrations
Center Links on Desktop, Left Align on Mobile

Related:
How to Center Nav Items in Bootstrap?
Bootstrap NavBar with Left, Center or Right Aligned Items
Moving 'Nav' Element Under 'Navbar-Brand' in Navbar

https://i.sstatic.net/MB9wA.png

Employing the mx-auto class is an effective way to center elements

<ul class="navbar-nav mx-auto">

Give this a shot.

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

.nav-tabs {
    text-align:center !important;
}

For more information, visit: this link. Here is an example of how you can structure your navigation bar:

<nav class="navbar navbar-light main-nav">
<div class="container text-xs-center">
    <ul class="nav navbar-nav pull-xs-left">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Download</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
        </li>
    </ul>

    <ul class="nav navbar-nav" style="display: inline-block;">
        <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>

    <ul class="nav navbar-nav pull-xs-right">
        <li class="nav-item">
            <a class="nav-link" href="#">Rates</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Help</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
    </ul>
</div>
</nav>

Make sure to include the classes text-xs-center on your container and set display: inline-block; for your list items.

I encountered a comparable issue where the anchor text in my Bootstrap4 navbar was not aligned properly. I resolved it by including text-center in the anchor's class.

Create a fresh new design

.container {
    position: relative;
}
.center-nav {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: auto;
    max-width: 200px;
    text-align: center;
}
.center-nav li{
  text-align: center;
  width:100%;
}

Replace the website name UL with the following code snippet

<ul class="nav navbar-nav center-nav">
        <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
 </ul>

I trust this information is helpful..

According to the documentation

Navbars can include text using .navbar-text. This class adjusts the alignment and spacing for text strings.

I added the .navbar-text class to my <li> element, resulting in

<li class="nav-item navbar-text">

This centers the links vertically in relation to my navbar-brand image

Having trouble centering text? The solution could lie within the navbar-text class.

<ul class="nav navbar-nav navbar-right">
   <li class="navbar-text">
    @*@Html.ActionLink("Hello " + userName,"Index", "Manage", routeValues: null, 
htmlAttributes: new { title = "Manage", onclick = "javascript:return false;" 
})*@
  
 <p style="color: #999999;"> Hello  @userName</p>
</li>