Html 如何在网格列中居中放置网格项？

我正在为我的浏览器构建一个基本主页。我有4类链接，所以我把它们都放在一个网格中，以便轻松对齐。我能够做到这一点，但网格项并没有在每列中居中。然后我尝试将网格项居中，但没有成功。我也在使用jQuery。这是我的密码：

<style>
    html,
    body {
        background-color: #53a8ed;
        color: white;
        font-family: 'Dosis', sans-serif;
        letter-spacing: 2px;
        font-weight: bolder;
        width: 100%;
    }

    #title {
        margin-top: 125px;
        text-align: center;
    }

    #content {
        text-align: auto;
        margin: 0 10%;
        width: auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr;
        grid-gap: 15px;
    }

    .contentListWithHeader {
        border: 2px solid red;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .contentHeader {
        text-align: auto;
        position: relative;
        top: 0%;
    }

    #school {
        grid-column: 1/4;
        grid-row: 1/1;
    }

    #entertainment {
        grid-column: 2/4;
        grid-row: 1/1;
    }

    #programming {
        grid-column: 3/4;
        grid-row: 1/1;
    }

    #projects {
        grid-column: 4/4;
        grid-row: 1/1;
    }

    .list {
        display: none;
    }
</style>

<h1 id="title">Home</h1>
<div id="content">
    <div id="school" class="contentListWithHeader">
        <h3 class="contentHeader">School</h3>
        <div id="schoolList" class="list">
            <ul>
                <li><a href="https://app.schoology.com/home">Schoology</a></li>
                <li><a href="https://drive.google.com/drive/my-drive">Google Drive</a></li>
                <li><a href="https://plusportals.com/gmhs">Plus Portals</a></li>
                <li><a
                        href="https://owl.purdue.edu/owl/research_and_citation/mla_style/mla_formatting_and_style_guide/mla_formatting_and_style_guide.html">MLA
                        Citation</a></li>
            </ul>
        </div>
    </div>
    <div id="entertainment" class="contentListWithHeader">
        <h3 class="contentHeader">Entertainment</h3>
        <div id="entertainmentList" class="list">
            <ul>
                <li><a href="https://www.youtube.com/">Youtube</a></li>
                <li><a href="https://www.netflix.com">Netflix</a></li>
            </ul>
        </div>
    </div>
    <div id="programming" class="contentListWithHeader">
        <h3 class="contentHeader">Programming</h3>
        <div id="programmingList" class="list">
            <ul>
                <li><a
                        href="">cPanel</a>
                </li>
                <li><a
                        href="">NameCheap</a>
                </li>
                <li><a href="https://github.com/Gbillington1">Github</a></li>
                <li><a
                        href="https://www.khanacademy.org/profile/grahamhbillington/assignments/teacher/kaid_66866897972006194384950/class/4584679721369600">Khan
                        Academy</a></li>
                <li><a href="https://www.udemy.com/course/complete-web-developer-course/">uDemy</a></li>
            </ul>
        </div>
    </div>
    <div id="projects" class="contentListWithHeader">
        <h3 class="contentHeader">Projects</h3>
        <div id="projectsList" class="list">
            <ul>
                <li><a>something</a></li>
            </ul>
        </div>
    </div>
</div>

<script>

    $(document).ready(function () {
        $("#school").hover(function () {
            $("#schoolList").slideToggle("fast");
        });
        $("#entertainment").hover(function () {
            $("#entertainmentList").slideToggle("fast");
        });
        $("#programming").hover(function () {
            $("#programmingList").slideToggle("fast");
        });
        $("#projects").hover(function () {
            $("#projectsList").slideToggle("fast");
        });
    });

</script>

如果要使用对齐项目：居中；您必须使用此CSS来创建网格容器。 如果要使用“对齐自身：中心”来对齐网格容器的项目；

---

你可以在这篇精彩的文章中阅读更多关于CSS网格的内容

如果你可以尝试的话-如果我帮助你，标记答案是最好的答案我尝试了，然后它说我必须等待5分钟才能标记为最佳答案。然后我不得不去上课。但是谢谢你！帮助解决了我的问题，并向我展示了CSS网格的真正威力