title: Centering Bootstrap navbar horizontally and vertically
body: <p>I'm new to Bootstrap and I'm trying to center the navbar both horizontally and vertically so it looks something like this <a href="https://i.stack.imgur.com/gqwg9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gqwg9.png" alt="this"></a> but I can't seem to figure it out.</p>
  
  <p>Here's the html:</p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
          &lt;nav class="navbar navbar-default"&gt;
            &lt;div class="container-fluid"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false"&gt;
                      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="collapse navbar-collapse" id="nav"&gt;
                &lt;ul class="nav navbar-nav"&gt; 
                  &lt;li class="active"&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#portfolio"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#blog"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#pages"&gt;Pages&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#features"&gt;Features&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#mega-menu"&gt;Mega menu&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt; 
              &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
            &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
  &lt;/nav&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and CSS:</p>
  
  <pre><code>nav {
      color: #fff;
      height: 112px;
      text-transform: uppercase;
      font-size: 15px;
      font-weight: bold;
  }
  </code></pre>