bootstrap navbar center vertically horizontally? - html

Question

Is it possible to center the navbar vertically and horizontally?
/**
* Logo.
*/
.button-logo {
font-family: 'Monoton', cursive;
font-weight:normal;
font-size:40px;
font-weight: 300;
line-height: 40px;
letter-spacing: 1px;
}
.button-logo:hover {
text-decoration: none;
}
.button-logo span {
display: block;
clear:both;
color: #000;
}
/**
* Centerise the logo.
*/
.navbar-header {
float: left;
text-align: center;
width: 100%;
}
.navbar-brand {
float:none;
}
/**
* Centerise the navbar.
*/
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
/**
* Remove default background, radius, etc.
*/
.navbar {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
border: 0;
background: none;
box-shadow: none;
margin-bottom: 0;
}
.navbar-default .navbar-nav > li > a {
font-family: 'Monoton', cursive;
font-size: 25px;
letter-spacing: 2px;
color: #000;
color: rgba(0, 0, 0, 0.5);
padding-bottom: 0 !important;
}
.navbar-default .navbar-nav > li > a:hover {
color: #000;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
background: none;
background: none;
box-shadow: none;
color: #000;
}
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand button-logo" href="#">
<span>brand</span>
<span>brand</span>
<span>brand</span>
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<!-- menu-box -->
<div class="menu-box">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<!-- menu-box -->
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
But this only centers the navbar horizontally not vertically.
Any ideas?
jsfiddle

Answer 1

to place your navbar in the center of your screen you can simply add
nav {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
https://jsfiddle.net/anpvtaxu/1/

Answer 2

If Igot your question correctly :
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
[UPDATE]
Above is for horizontal center;If you want it to be centered vertically use:
top:50%;
in every element you want it be centered vertically.