Materializecss矩形网格3x3

Question

坚持使用3x3尺寸的全屏矩形网格。

这是一个布局：

这就是我现在所拥有的：https://jsfiddle.net/hbrnszns/（ ctrl点击）

这里是css：

.rectangle {
    float: left;
    width: 100%;
    padding-bottom: 50%;
    margin: 1.66%;
    align-items: center;
    background-color: #00a388;
}

如何在矩形中正确垂直对齐内部图像，以及如何正确地对齐

Answer 1

使用现有布局，您可以使用绝对定位将图像置于中心。它是position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);

的组合

.light-grass {
  background-color: #79bd8f;
}

.rectangle {
    width: 100%;
    padding-bottom: 50%;
    margin: 1.66%;
    align-items: center;
    background-color: #00a388;
    position: relative;
}

.rectangle > span {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet"/>
<div class="header">
	<nav class="light-grass z-depth-0" role="navigation">
	</nav>
</div>  

<div class="row">
  <div class="col s4">
    <div class="rectangle valign-wrapper">
      <span><img class="work-icon" src="http://placehold.it/100x40"></span>
    </div>
  </div>
  <div class="col s4">
    <div class="rectangle valign-wrapper">
      <span><img class="work-icon" src="http://placehold.it/100x40"></span>
    </div>
  </div>

  <div class="col s4">
    <div class="rectangle valign-wrapper">
      <span><img class="work-icon" src="http://placehold.it/100x40"></span>
    </div>
  </div>
</div>

<div class="row">
  <div class="col s4">
    <div class="rectangle valign-wrapper">
      <span><img class="work-icon" src="http://placehold.it/100x40"></span>
    </div>
  </div>
  <div class="col s4">
    <div class="rectangle valign-wrapper">
      <span><img class="work-icon" src="http://placehold.it/100x40"></span>
    </div>
  </div>

  <div class="col s4">
    <div class="rectangle valign-wrapper">
      <span><img class="work-icon" src="http://placehold.it/100x40"></span>
    </div>
  </div>
</div>

<div class="row">
  <div class="col s4">
    <div class="rectangle valign-wrapper">
      <span><img class="work-icon" src="http://placehold.it/100x40"></span>
    </div>
  </div>
  <div class="col s4">
    <div class="rectangle valign-wrapper">
      <span><img class="work-icon" src="http://placehold.it/100x40"></span>
    </div>
  </div>

  <div class="col s4">
    <div class="rectangle valign-wrapper">
      <span><img class="work-icon" src="http://placehold.it/100x40"></span>
    </div>
  </div>
</div>