具有固定宽度列表项的容器div内的无序列表？

Question

如何将无序的项目列表置于黑色容器盒中心？根据用户屏幕的大小，每行显示X个li个项目。我希望这些项目始终在黑色容器中居中。我怎么能这样做？

小提琴：http://jsfiddle.net/8kw84kuw/

HTML

<div id="container">
    <div id="gallery-wrap">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

CSS

#container {
margin: 100px auto 0;
max-width: 1060px;
padding: 0 20px;
}

#gallery-wrap {
background: #000;
clear: both;
outline: 1px solid #777;
padding: 30px 50px;
}

#gallery-wrap li {
    background: red;
    display: inline-block;
    height: 120px;
    width: 120px;
}

Answer 1

将text-align: center添加到#gallery-wrap并重置ul＆＃39; padding。

的 Updated Fiddle

＆＃13;

＆＃13;

#container {
  margin: 100px auto 0;
  max-width: 1060px;
  padding: 0 20px;
}
#gallery-wrap {
  background: #000;
  clear: both;
  outline: 1px solid #777;
  padding: 30px 50px;
  text-align: center;
}
#gallery-wrap li {
  background: red;
  display: inline-block;
  height: 120px;
  width: 120px;
}
ul {
  padding: 0;
}

＆＃13;

<div id="container">
  <div id="gallery-wrap">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;