Block center

dabblet.css

/* Block center */
.block-center {
  margin-left: auto;
  margin-right: auto;
  width: 600px;
}

/* Inline center */
.inline-center {
  text-align: center;
}

/* Position center */
.position-center {
  position: absolute;
  left: 50%;
  margin-left: -305px;
  width: 600px;
}

/* New Position center */
.new-position-center {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 600px;
}





/* 'float' */
.float {
  border: 5px solid #000;
}

.float > li {
  float: left;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

/* 'inline-block' */
.inline-block {
  border: 5px solid #000;
}
.inline-block > li {
  display: inline-block;
}

/* 'table' */
.table {
  display: table;
  table-layout: fixed;
  border: 5px solid #000;
}
.table > li {
  display: table-cell;
}

/* Common navigation style */
.nav {
  margin-bottom: 50px;
  /* width: 100%; */
}
.nav > li {
  width: 120px;
}
.nav > li > a {
  display: block;
  padding-top: 1em;
  padding-bottom: 1em;
  background-color: tomato;
  text-align: center;
  font-weight: bold;
}
.nav > li > a:hover {
  background-color: orange;
}

/* Wrap all navigation */
.container {
  padding: 50px;
  background-color: #E9D8De;
}

/* ---- for demo --- */
* {
  margin: 0;
  padding: 0;
}

body {
}

a {
  color: inherit;
  text-decoration: none;
}

li {
  list-style: none;
}

dabblet.html

<div class="container">
<!-- Use 'float' -->
<ul class="nav float clearfix block-center">
 <li><a href="#">Home</a></li>
 <li><a href="#">News</a></li>
 <li><a href="#">Service</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
</ul>
</div>

<hr>

<div class="container">
<!-- Use 'inline-block' -->
<ul class="nav inline-block inline-center">
 <li><a href="#">Home</a></li>
 <li><a href="#">News</a></li>
 <li><a href="#">Service</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
</ul>
</div>

<hr>

<div class="container">
<!-- Use 'table' -->
<ul class="nav table position-center">
 <li><a href="#">Home</a></li>
 <li><a href="#">News</a></li>
 <li><a href="#">Service</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
</ul>
</div>

<hr>

<div class="container">
<!-- Use 'table' -->
<ul class="nav table new-position-center">
 <li><a href="#">Home</a></li>
 <li><a href="#">News</a></li>
 <li><a href="#">Service</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
</ul>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"140","seethrough":"","prefixfree":"1","page":"all"}