How to center a menu?

Question

I picked up this menu on the following website: Left Slide Menu with Icon, and I’d like to center it on my blogger. It was pre, I can put it at the bottom of the blog, but I wanted it at the center of the page. How can I center it?

@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css");
.menu,
.menu-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: #f7f7f7;
  z-index: 10;
  overflow: hidden;
  box-shadow: 2px 0 18px rgba(0, 0, 0, 0.26);
}

.menu li a {
  display: inline-block;
  text-indent: -500em;
  height: 5em;
  width: 5em;
  line-height: 5em;
  text-align: center;
  color: #72739f;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background 0.1s ease-in-out;
}

.menu li a:before {
  font-family: FontAwesome;
  speak: none;
  text-indent: 0em;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 1.4em;
}

.menu li a.search:before {
  content: "\f002";
}

.menu li a.archive:before {
  content: "\f187";
}

.menu li a.pencil:before {
  content: "\f040";
}

.menu li a.contact:before {
  content: "\f003";
}

.menu li a.about:before {
  content: "\f007";
}

.menu li a.home:before {
  content: "\f039";
}

.menu-bar li a:hover,
.menu li a:hover,
.menu li:first-child a {
  background: #267fdd;
  color: #fff;
}

.menu-bar {
  overflow: hidden;
  left: 5em;
  z-index: 5;
  width: 0;
  height: 0;
  transition: all 0.1s ease-in-out;
}

.menu-bar li a {
  display: block;
  height: 4em;
  line-height: 4em;
  text-align: center;
  color: #72739f;
  text-decoration: none;
  position: relative;
  font-family: verdana;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background 0.1s ease-in-out;
}

.menu-bar li:first-child a {
  height: 5em;
  background: #267fdd;
  color: #fff;
  line-height: 5
}

.para {
  color: #033f72;
  padding-left: 100px;
  font-size: 3em;
  margin-bottom: 20px;
}

.open {
  width: 10em;
  height: 100%;
}

@media all and (max-width: 500px) {
  .container {
    margin-top: 100px;
  }
  .menu {
    height: 5em;
    width: 100%;
  }
  .menu li {
    display: inline-block;
  }
  .menu-bar li a {
    width: 100%;
  }
  .menu-bar {
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0;
  }
  .open {
    width: 100%;
    height: auto;
  }
  .para {
    padding-left: 5px;
  }
}

@media screen and (max-height: 34em) {
  .menu li,
  .menu-bar {
    font-size: 70%;
  }
}

@media screen and (max-height: 34em) and (max-width: 500px) {
  .menu {
    height: 3.5em;
  }
}

<ul class="menu">

  <li title="home"><a href="#" class="menu-button home">menu</a></li>

  <li title="search"><a href="#" class="search">search</a></li>
  <li title="pencil"><a href="#" class="pencil">pencil</a></li>
  <li title="about"><a href="#" class="active about">about</a></li>
  <li title="archive"><a href="#" class="archive">archive</a></li>
  <li title="contact"><a href="#" class="contact">contact</a></li>
</ul>

<ul class="menu-bar">
  <li><a href="#" class="menu-button">Menu</a></li>
  <li><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Editorial</a></li>
  <li><a href="#">About</a></li>
</ul>

Answer 1

Like the position of it is as Fixed, changing property left you manage to move it. Try to put it this way, there just next to the position: left: 50%;, so that it is approximately halfway on the screen, or adjust as it is best centered according to the content of your blog. If possible put access to your blog so we can check better.