将div组中心作为响应式站点标题

Question

我正在寻找使用jQuery随机淡入的网站标题。在更改视口大小时，我想要的div堆叠（全部连续全行，当屏幕变小时，最多叠加3x3）。但是，我无法弄清楚如何让这组div成为页面＆gt;

的中心

#header {
  width: 100%;
  margin: 0 auto;
  padding-top: 20px;
}
#boxset div {
  width: 100px;
  height: 100px;
  float: left;
  overflow: hidden;
  margin-right: 8px;
  margin-bottom: 8px;
}
#boxset div p {
  margin: 0;
  background: #290052;
  color: #fff;
  font-size: 40px;
  width: 100%;
  height: 100%;
  /*display: none;*/
  padding-top: 26px;
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

<div id="header">
  <div id="boxset">
    <div>
      <p><a href="index.html">A</a>
      </p>
    </div>
    <div>
      <p><a href="index.html">B</a>
      </p>
    </div>
    <div>
      <p><a href="index.html">C</a>
      </p>
    </div>
    <div>
      <p><a href="index.html">D</a>
      </p>
    </div>
    <div>
      <p><a href="index.html">E</a>
      </p>
    </div>
    <div>
      <p><a href="index.html">F</a>
      </p>
    </div>
    <div>
      <p><a href="index.html">G</a>
      </p>
    </div>
    <div>
      <p><a href="index.html">H</a>
      </p>
    </div>
    <div>
      <p><a href="index.html">I</a>
      </p>
    </div>
  </div>
</div>

Answer 1

你可以使用display：inline-block;而不是浮动，然后text-align：center;在父母身上：

#header {
    text-align: center;
}
#header div {
    display: inline-block;
}

Answer 2

#header {
  width: 100%;
  margin: 0 auto;
  padding-top: 20px;
}
#boxset {
  text-align:center;
  font-size:0;
}
#boxset div {
  width: 100px;
  height: 100px;
  overflow: hidden;
  margin-right: 8px;
  margin-bottom: 8px;
  display: inline-block;

}
#boxset div p {
  margin: 0;
  background: #290052;
  color: #fff;
  font-size: 40px;
  width: 100%;
  height: 100%;
  /*display: none;*/
  padding-top: 26px;
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

<div id="header">
  <div id="boxset">
    <div>
      <p><a href="index.html">A</a>
      </p>
    </div>
    <div>
      <p><a href="index.html">B</a>
      </p>
    </div>
    <div>
      <p><a href="index.html">C</a>
      </p>
    </div>
    <div>
      <p><a href="index.html">D</a>
      </p>
    </div>
    <div>
      <p><a href="index.html">E</a>
      </p>
    </div>
    <div>
      <p><a href="index.html">F</a>
      </p>
    </div>
    <div>
      <p><a href="index.html">G</a>
      </p>
    </div>
    <div>
      <p><a href="index.html">H</a>
      </p>
    </div>
    <div>
      <p><a href="index.html">I</a>
      </p>
    </div>
  </div>
</div>