如何在页面中集中网格

Question

我在网格中有下面的列表，它运行得很好，但我无法根据绿色部分将其集中起来。我已经尝试过使用flex，但没有成功。有人能好心帮我吗？

编辑：我在列表中添加了更多的iten，一旦它对自己进行网格调整，以在行中显示更多的itens。当我尝试使用答案中指示的代码时，网格是集中的，但只在一行中(我不知道是否可以将其集中在网格中的多行中(。

我在下面插入了我的主代码，显示了到目前为止我所做的工作。

section {
background: green
}
#related-posts ul {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(min(7.1rem, 100%), 1fr));
justify-items: center;
}
#related-posts ul li {
display: inline-block;
text-align: center;
vertical-align: top;
}
.pthumb img {
height: 97px;
width: 129px;
object-fit: cover;
}

<section>
<div id="related-posts">
<ul>
<li>
<div class="pthumb">
<a href="#">
<img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
</a>
</div>
<a href="#">Item 1</a>
</li>
<li>
<div class="pthumb">
<a href="#">
<img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
</a>
</div>
<a href="#">Item 2</a>
</li>
<li>
<div class="pthumb">
<a href="#">
<img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
</a>
</div>
<a href="#">Item 3</a>
</li>
<li>
<div class="pthumb">
<a href="#">
<img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
</a>
</div>
<a href="#">Item 4</a>
</li>
<li>
<div class="pthumb">
<a href="#">
<img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
</a>
</div>
<a href="#">Item 5</a>
</li>
<li>
<div class="pthumb">
<a href="#">
<img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
</a>
</div>
<a href="#">Item 6</a>
</li>
<li>
<div class="pthumb">
<a href="#">
<img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
</a>
</div>
<a href="#">Item 7</a>
</li>
<li>
<div class="pthumb">
<a href="#">
<img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
</a>
</div>
<a href="#">Item 8</a>
</li>
<li>
<div class="pthumb">
<a href="#">
<img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
</a>
</div>
<a href="#">Item 9</a>
</li>
</ul>
</div>
</section>

Answer 1

我可以通过在部分或#related posts 上添加以下css来集中它

display: grid;
justify-content: center;

以及以下#相关帖子ul:

display: flex;
flex-wrap: wrap;

这是工作演示：链接

section {
background: green;  
}
#related-posts{
display: flex;
justify-content: center;
}
#related-posts ul {
display: flex;
flex-wrap: wrap;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(min(7.1rem, 100%), 1fr));
}
#related-posts ul li {
display: inline-block;
text-align: center;
vertical-align: top;
}
.pthumb img {
height: 97px;
width: 129px;
object-fit: cover;
}

<section>
<div id="related-posts">
<ul>
<li>
<div class="pthumb">
<a href="#">
<img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
</a>
</div>
<a href="#">Item 1</a>
</li>
<li>
<div class="pthumb">
<a href="#">
<img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
</a>
</div>
<a href="#">Item 2</a>
</li>
<li>
<div class="pthumb">
<a href="#">
<img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
</a>
</div>
<a href="#">Item 3</a>
</li>
<li>
<div class="pthumb">
<a href="#">
<img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
</a>
</div>
<a href="#">Item 4</a>
</li>
<li>
<div class="pthumb">
<a href="#">
<img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
</a>
</div>
<a href="#">Item 5</a>
</li>
<li>
<div class="pthumb">
<a href="#">
<img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
</a>
</div>
<a href="#">Item 6</a>
</li>
<li>
<div class="pthumb">
<a href="#">
<img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
</a>
</div>
<a href="#">Item 7</a>
</li>
<li>
<div class="pthumb">
<a href="#">
<img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
</a>
</div>
<a href="#">Item 8</a>
</li>
<li>
<div class="pthumb">
<a href="#">
<img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
</a>
</div>
<a href="#">Item 9</a>
</li>
</ul>
</div>
</section>

Answer 2

你是这样的意思吗？

section {
background: green;
display: flex;
justify-content: center;
}

#related-posts ul{
display: flex;
grid-gap: 1rem;
flex-wrap: wrap;

}
#related-posts ul li {
display: inline-block;
text-align: center;
vertical-align: top;
}
.pthumb img {
height: 97px;
width: 129px;
object-fit: cover;
}

<section>
<div id="related-posts">
<ul>
<li>
<div class="pthumb">
<a href="#">
<img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
</a>
</div>
<a href="#">Item 1</a>
</li>
<li>
<div class="pthumb">
<a href="#">
<img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
</a>
</div>
<a href="#">Item 2</a>
</li>
<li>
<div class="pthumb">
<a href="#">
<img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
</a>
</div>
<a href="#">Item 3</a>
</li>
<li>
<div class="pthumb">
<a href="#">
<img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
</a>
</div>
<a href="#">Item 4</a>
</li>
<li>
<div class="pthumb">
<a href="#">
<img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
</a>
</div>
<a href="#">Item 5</a>
</li>
<li>
<div class="pthumb">
<a href="#">
<img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
</a>
</div>
<a href="#">Item 6</a>
</li>
<li>
<div class="pthumb">
<a href="#">
<img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
</a>
</div>
<a href="#">Item 7</a>
</li>
<li>
<div class="pthumb">
<a href="#">
<img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
</a>
</div>
<a href="#">Item 8</a>
</li>
<li>
<div class="pthumb">
<a href="#">
<img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
</a>
</div>
<a href="#">Item 9</a>
</li>
</ul>
</div>
</section>