html - CSS网格；将内容放在中心

我找到了一个片段，用CSS制作了一系列的框。一切看起来不错，但我似乎无法弄清楚两件事。

1）如何控制盒子的高度？尝试设置height: 100px;时，它将被忽略。

2）如何确保盒子的内容放在盒子的中间？我已经尝试了一切，但是一点运气都没有...我正在考虑水平和垂直放置在盒子的中间...

这是HTML；

  <div id="wrapper">
  <div id="wrap">
    <div class="box">
      <div class="innerContent">
        This is the content.
      </div>
    </div>
    <div class="box">
      <div class="innerContent">
        This is the content.
      </div>
    </div>
    <div class="box">
      <div class="innerContent">
        This is the content.
      </div>
    </div>
    <div class="box">
      <div class="innerContent">
        This is the content.
      </div>
    </div>
    <div class="box">
      <div class="innerContent">
        This is the content.
      </div>
    </div>
    <div class="box">
      <div class="innerContent">
        This is the content.
      </div>
    </div>
    <div class="box">
      <div class="innerContent">
        This is the content.
      </div>
    </div>
    <div class="box">
      <div class="innerContent">
        This is the content.
      </div>
    </div>
  </div>
  </div>

这是CSS；

#wrapper {
      width: 60%;
      margin: auto;
    }
    #wrap {
      overflow: hidden;
    }
    .box {
      width: 25%;
      padding-bottom: 25%;
      color: #CC0000;
      position: relative;
      float: left;
      -moz-border-radius: 10px;
      border-radius: 10px; /* standards-compliant: (IE) */
    }
    .innerContent {
      position: absolute;
      left: 5px;
      right: 5px;
      top: 5px;
      bottom: 5px;
      background: #FFFFFF;
      padding: 10px;
      -moz-border-radius: 10px 10px 10px 10px;
      border-radius: 10px 10px 10px 10px; /* standards-compliant: (IE) */
    }
    .innerContent:hover {
      background: #999999;
    }

最佳答案

这是您要查找的内容：https://jsfiddle.net/76mywz8j/

根据您的目标浏览器，您可能可以使用

display: flex;
align-items: center;

另外，您可能要考虑从position: absolute中删除​​.innerContent{}。

我还将背景色从.innerContent{}移到了.box{}（并且悬停状态现在在.box而不是.innerContent{}上定义）。这使您可以根据需要设置框的样式。通过“细化” .innerContent{}上定义的样式，相对于其容器定位变得更加容易。

其他一些建议：为边框半径使用简写。而且您不需要在border-radius和.box{}上都定义了.innerContent{}。