How to center without losing it's function

Question

I'm attempting to center my portfolio gallery. I'm having trouble centering it without losing it's function. When you click on either projects or websites it will narrow down the photos. Whenever i try to center it loses the ability to do that.

Some of the elements are floated left [float: left] which i think is causing centering issues but it needs to be floated left in order to function. Does anyone know how i could center it without losing it's ability to narrow down the pictures? I've tried wrapping it in a div and using text-align: center and margin: 0 auto but no luck. I was able to center it when i got rid of all the float: left but it didn't work and it looked distorted.

Html:

<ul id="filter">
  <li class="current"><a href="#">All</a></li>
  <li><a href="#">projects</a></li>
  <li><a href="#">websites</a></li>
</ul>

<div id="center_wrapper">
  <ul id="gallery">
    <li class="projects">
      <a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
    </li>
    <li class="projects">
      <a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
    </li>
    <li class="projects">
      <a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
    </li>
    <li class="projects">
      <a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
    </li>
    <li class="projects">
      <a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
    </li>
    <li class="websites">
      <a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
    </li>
    <li class="websites">
      <a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
    </li>
    <li class="websites">
      <a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
    </li>
  </ul>
</div>

css:

.imgContainer {
  width: 400px;
  height: 400px;
  float: left;
  border: solid 1px #999;
}

img {
  width: 100%;
  height: 100%;
}

ul#filter {
  float: left;
  font-size: 16px;
  list-style: none;
  width: 100%;
}

ul#filter li {
  border-right: 1px solid #dedede;
  float: left;
  line-height: 16px;
  margin-right: 10px;
  padding-right: 10px;
}

ul#filter li.current a {
  color: #333;
  font-weight: bold;
}

ul#gallery {
  list-style: none;
  display: inline-block;
}

ul#gallery li {
  float: left;
}

.center_wrapper {
  text-align: center;
  margin: 0 auto;
}

Answer 1

Here is a better way to approach this.

Your HTML is the content you are putting out into the world. It needs to be both human and computer readable. You also shouldn’t be using CSS floats for layout in 2015. We have a myriad of better approaches for this such as flexbox or inline-block that are far simpler to work with and less error prone.

* { margin:0; padding:0 }

body {
  font-size: 16px;
  padding: 1em;
  text-align: center;
}

nav {
  margin-bottom: 1em;
  text-align: start;
}
nav a {
  border-right: 1px solid #dedede;
  margin-right: 10px;
  padding-right: 10px;
}
nav a.current {
  color: #333;
  font-weight: bold;
}

section {
  display: inline-block;
  text-align: start;
  width: 90%;
}

<nav>
    <a href="#" class="current">All</a>
    <a href="#">projects</a>
    <a href="#">websites</a>
</nav>

<section id="gallery">
    <a href="#" class="project"><img title="title of project" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png"></a>    
    <a href="#" class="project"><img title="title of project" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png"></a>
    <a href="#" class="project"><img title="title of project" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png"></a>
    <a href="#" class="project"><img title="title of project" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png"></a>
    <a href="#" class="project"><img title="title of project" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png"></a>
    <a href="#" class="website"><img title="title of website" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png"></a>
    <a href="#" class="website"><img title="title of website" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png"></a>
    <a href="#" class="website"><img title="title of website" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png"></a>
</section>

Answer 2

ul#gallery {
  list-style: none;
  display: inline-block;
  padding-left:0;
  padding-right:0;
  text-align: center;
}

ul#gallery li {
  display: inline-block;
}

Answer 3

On the parent ul:

ul {
    font-size:0;
    text-align:center;
}

On li elements instead of floating:

li {
    /*float:left;*/
    display:inline-block;
    font-size:16px;
}

http://codepen.io/nOji/pen/pJGxQE