Css 如何将多张卡居中？

我的页面现在看起来像这样：

我希望它看起来像这样：

这是我的代码：

<div class="row center-align">
    <div class="col s12 m4 l3 center">
      <div class="card light-blue darken-4">
        <div class="card-content white-text">
          <span class="card-title">CARD 1</span>
          <p>I am a very simple card. I am good at containing small bits of information.I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
            <%= link_to 'Sign in', new_user_session_path %>
            <%= link_to "sign up" , new_user_registration_path %>
        </div>
      </div>
    </div>
    <div class="col s12 m4 l3 center">
      <div class="card blue">
        <div class="card-content black-text">
          <span class="card-title">CARD 2</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
            <%= link_to 'Sign in', new_user_session_path %>
            <%= link_to "sign up" , new_user_registration_path %>
        </div>
      </div>
    </div>
</div>

<div class="row red lighten-2">
  <div class="col s12 m1 l3">
    <div class="center">
        <i class="material-icons" style="font-size: 130px">title</i>
        <h5>sdsdf sfsf</h5>
        <p class="light center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a semper nibh.</p>
    </div>
  </div>
  <div class="col s1 m1 l3">
    <div class="center">
        <i class="material-icons" style="font-size: 130px">videocam</i>
        <h5>sdsdf sfsf</h5>
        <p class="light center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a semper nibh..</p>
    </div>
  </div>
  <div class="col s1 m1 l3">
    <div class="center">
        <i class="material-icons" style="font-size: 130px">recent_actors</i>
        <h5>sdsdf sfsf</h5>
        <p class="light center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a semper nibh.</p>
     </div>
  </div>
  <div class="col s1 m1 l3">
    <div class="center">
        <i class="material-icons" style="font-size: 130px">mail_outline</i>
        <h5>sdsdf sfsf</h5>
        <p class="light center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a semper nibh.</p>
    </div>
</div>

<div class="row center-align">
    <div class="col s12 m4 l3 center">
      <div class="card light-blue darken-4">
        <div class="card-content white-text">
          <span class="card-title">CARD 3</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
            <%= link_to 'Sign in', new_user_session_path %>
            <%= link_to "sign up" , new_user_registration_path %>
        </div>
      </div>
    </div>
    <div class="col s12 m4 l3 center">
      <div class="card blue">
        <div class="card-content black-text">
          <span class="card-title">CARD 4</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
            <%= link_to 'Sign in', new_user_session_path %>
            <%= link_to "sign up" , new_user_registration_path %>
        </div>
      </div>
    </div>
</div>

卡1
我是一张非常简单的卡片。我擅长包含少量的信息。我很方便，因为我需要很少的标记才能有效地使用

卡2
我是一张非常简单的卡片。我擅长包含少量信息。
我很方便，因为我需要很少的标记来有效地使用

标题
自卫队
Lorem ipsum dolor sit amet，康塞特图发展精英。前庭一个半尖头
摄像机
自卫队
Lorem ipsum dolor sit amet，康塞特图发展精英。前庭
最近的演员
自卫队
Lorem ipsum dolor sit amet，康塞特图发展精英。前庭一个半尖头
邮购提纲
自卫队
Lorem ipsum dolor sit amet，康塞特图发展精英。前庭一个半尖头
卡片3
我是一张非常简单的卡片。我擅长包含少量信息。
我很方便，因为我需要很少的标记来有效地使用

卡4
我是一张非常简单的卡片。我擅长包含少量信息。
我很方便，因为我需要很少的标记来有效地使用

我正在使用materialize。我不知道为什么卡3和卡4会进入红色区域！而且，即使我已经告诉这排人要居中，它还是决定留在左边

使用以使列居中，看起来您缺少中间部分的结束

div

卡1
我是一张非常简单的卡片。我擅长包含少量的信息。我很方便，因为我需要很少的标记才能有效地使用

卡2
我是一张非常简单的卡片。我擅长包含少量信息。我很方便，因为我需要很少的标记来有效地使用

标题
自卫队
Lorem ipsum dolor sit amet，康塞特图发展精英。前庭一个半尖头
摄像机
自卫队
Lorem ipsum dolor sit amet，康塞特图发展精英。前庭
最近的演员
自卫队
Lorem ipsum dolor sit amet，康塞特图发展精英。前庭一个半尖头
邮购提纲
自卫队
Lorem ipsum dolor sit amet，康塞特图发展精英。前庭一个半尖头
卡片3
我是一张非常简单的卡片。我擅长包含少量信息。我很方便，因为我需要很少的标记来有效地使用

卡4
我是一张非常简单的卡片。我擅长包含少量信息。我很方便，因为我需要很少的标记来有效地使用

应用下面示例中使用的方法，您会很好。根据需要进行调整

#父级{
宽度：80%；
身高：100%；
文本对齐：居中；/*这是键*/
位置：相对位置；
保证金：0自动；
}
.卡片{
宽度：100px；
高度：100px；
显示：内联块；
线高：100px；
背景色：达克朗格；
字体大小：粗体；
字体大小：36px；
}

1.
2.
3.