CSS Grid：使用网格容器将项目居中

Question

大家好，我现在似乎在为将这些图片显示在屏幕中央而苦苦挣扎了一段时间。我一直在尝试使用justify-content，justify-items，align-content ...，但是似乎没有任何效果。The problem

这是我当前的代码CSS和HTML：

.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 50px;
border: 10px solid black;}

.container img{
width:100%;
border: 10px solid black;}



  <div class="container">
    <img src="/Afbeeldingen/Header/images/pexels-photo-1028225.jpeg" alt="voorbeeld foto">
    <img src="/Afbeeldingen/Header/images/pexels-photo-1136576.jpeg" alt="voorbeeld foto">
    <img src="/Afbeeldingen/Header/images/pexels-photo-1253734.jpeg" alt="voorbeeld foto">
    <img src="/Afbeeldingen/Header/images/pexels-photo-1281787.jpeg" alt="voorbeeld foto">
</div>

感谢高级帮助。

Answer 1

您可以将display: flex与display: flex一起使用来自动居中所有项目，无论有多少个项目>

justify-content
.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 50px;
    border: 10px solid black;
    display:flex;
    justify-content:center;
    align-items:center
}

.container img{
    width:100%;
    border: 10px solid black;
}

Answer 2

只需在您的img规则中添加更多CSS：