html - CSS网格；将内容置于中心

Question

我找到了一个在 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;
    }

Answer 1

这是您要找的吗:https://jsfiddle.net/76mywz8j/

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

display: flex;
align-items: center;

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

我还将背景色从 .innerContent{} 移到了 .box{}(悬停状态现在定义在 .box 而不是 上。内部内容{})。这使您可以随心所欲地设计盒子的样式；通过“精简”在 .innerContent{} 上定义的样式，相对于其容器的定位变得更加容易。

其他一些建议:使用 border-radius 的简写形式。您不需要同时在 .box{} 和 .innerContent{} 上定义 border-radius。