为什么项目中心对齐不起作用？

这是我尝试创建图像网格的 HTML 代码：

来源：https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp

我想设置屏幕的图像显示中心，但align-items或align-self不能同时唤醒：

<div style="align-items: center;align-content: center;align-self: center;">
  <%foreach $datalist as $row%>
    <div class="row">
      <div class="column">
        <img src="shared/img/<%$row.image_name%>">
        <p><%$row.title%></p>
      </div>
      <div class="column">
        <img src="shared/img/<%$row.image_name%>">
        <p><%$row.title%></p>
      </div>
      <div class="column">
        <img src="shared/img/<%$row.image_name%>">
        <p><%$row.title%></p>
      </div>
      <div class="column">
        <img src="shared/img/<%$row.image_name%>">
        <p><%$row.title%></p>
      </div>
    </div>
  <%/foreach%>
</div>

Result:

为什么项目中心对齐不起作用？

如何才能显示到屏幕中央呢？

First align the content经纱的div而不是扭曲div

.row{
  display: flex;
  justify-content: center;
  align-items: center;
}

or try align-items有设置width