Zentrieren Sie ein Element in Bootstrap 4 Navbar

Aktualisiert für Bootstrap 4.1 und höher

Bootstrap 4 Die Navbar verwendet nun Flexbox, sodass der Website Name mit mx-auto zentriert werden kann. Die Menüs auf der linken und rechten Seite erfordern keine Schwebekörper. 

<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>

Navbar-Center mit mx-auto Demo

Wenn die Navbar nur einen einzigen navbar-nav hat, kann justify-content-center auch zum Zentrieren verwendet werden.

EDIT

In der obigen Lösung ist der Website Name zentriert relativ links und rechts navbar-nav. Wenn also die Breite dieser benachbarten Navs unterschiedlich ist, wird Website Name nicht mehr zentriert.

Um dieses Problem zu beheben, kann eine der Flexbox-Workarounds für absolute centering verwendet werden ...

Option 1 - Position verwenden: absolut;

Da die Verwendung der absoluten Positionierung in der Flexbox in Ordnung ist, können Sie diese Option für das zu zentrierende Objekt verwenden.

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

Navbar-Zentrum mit absoluter Position Demo

Option 2 - Flexbox-Verschachtelung verwenden

Schließlich besteht eine weitere Option darin, das zentrierte Element ebenfalls display:flexbox und zentriert auszurichten. In diesem Fall muss jede Navbar-Komponente flex-grow:1 haben.

Seit Bootstrap 4 Beta ist die Navbar nun display:flex. Bootstrap 4.1.0 enthält eine neue flex-fill-Klasse, mit der jeder Nav-Abschnitt die Breite ausfüllt:

<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">
            <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>
            <li class="nav-item">
                <a class="nav-link" href="#">More</a>
            </li>
        </ul>
        <ul class="nav navbar-nav flex-fill justify-content-center">
            <li class="nav-item"><a class="nav-link" href="#">Center</a></li>
        </ul>
        <ul class="nav navbar-nav flex-fill w-100 justify-content-end">
            <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>

Navbar-Zentrum mit flexbox nesting Demo

Vor Bootstrap 4.1.0 können Sie die Flex-Fill-Klasse wie folgt hinzufügen ...

.flex-fill {
   flex:1
}

Ab 4.1 ist flex-fill in Bootstrap enthalten.

Bootstrap 4 Navbar-Center-Demos

Verbunden:
Wie zentriere ich Nav-Items in Bootstrap?
Bootstrap NavBar mit links, mittig oder rechts ausgerichteten Objekten

Versuche dies. 

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

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

Ich hatte ein ähnliches Problem. Der Ankertext in meiner Bootstrap4-Navigationsleiste wurde nicht zentriert. Fügen Sie einfach text-center in der Klasse des Ankers hinzu.

verwenden Sie mx-auto erledigt den Job

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

Siehe: https://stackoverflow.com/a/14146967/1596547 , jetzt können Sie verwenden:

<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>

wende text-xs-center auf deinen Container an und setze display: inline-block; für deine Liste. 

aus den docs

Navbars können mithilfe von .navbar-text Textteile enthalten. Diese Klasse passt die vertikale Ausrichtung und den horizontalen Abstand für Textfolgen an.

ich habe die .navbar-text-Klasse auf mein <li>-Element angewendet, das Ergebnis ist also 

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

dadurch werden die Links vertikal zu meiner Navbar-Marke img zentriert

mache einen neuen Stil

.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%;
}

Ersetzen Sie den Website-Namen UL durch unten

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

Hoffe das hilft..