Why align items center not working?

Question

This is my HTML code attempt to create an image grid:

Source at: https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp

I want set image display center of screen but align-items or align-self not woking both:

<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:

Why align items center not working?

How can display to center of screen?

Answer 1

This will work:

<div>
    <%foreach $datalist as $row%>
    <div class="row" style="style="display: flex; justify-content: center; align-items: center;">
        <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>

Answer 2

First align the content of warp div and not the warp div

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

or try align-items with setting width

Answer 3

See MDN:

The CSS align-items property defines how the browser distributes space between and around flex items along the cross-axis of their container.

Since the div is not display: flex, the align-items property does not apply.