在 CSS 网格内居中 div

Question

我正在学习写作 HTML/CSS/JS 并且我正在创建一些模拟网站以边学边学。我开始冒险进入 CSS 网格，并努力将网格框中的项目水平和垂直居中对齐。我发现 Grid 在创建布局方面非常强大，但出于某种原因我无法理解这一部分。我想将 head-content-container 置于 header 的中心。

在研究过程中，我发现 THIS website and THIS one. I see they suggest using justify-self:center; and align-self:center; but for some reason I am not able to get it to work. It is possible that I have another issue that I do not quite understand. Here 是我的 github 存储库的 link，下面是我的代码片段。预先感谢您能给我的任何帮助。

     <body>
        <nav class="main-nav-wrapper">
            <div class="nav-logo-wrapper">
                <img class="nav-logo" src="img\T-Portfolio_Logo-02.svg" alt="Bolt Development Logo">
            </div>       
        </nav>
        <div class="grid-wrapper">
            <header class="main-header">
                <div class="head-content-container">
                    <h1>Bolt Development</h1>
                </div>
            </header>
        </div>
    </body>

编辑：忘记添加 HTML 片段。

.grid-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    grid-template-rows: 500px 500px 500px 500px 200px;
    grid-template-areas: "head head head"
                         "main main main"
                         "portfolio_1 portfolio_2 portfolio_3"
                         "portfolio_4 portfolio_5 portfolio_6"
                         "footer footer footer";
}

.main-header {
    grid-area: head;
    background-image: url(https://placeimg.com/1000/800/tech);
    background-size: cover;
    grid-column: 1/4;
    color: white;
}

.main-nav-wrapper {
    display: grid;
    grid-template-columns: repeat(8, 1fr); 
    height: 100px;
    background-color: #191919;
}

.nav-logo-wrapper {
    grid-column: 1/2;
    padding: .5em;
    max-height: 100%;
}

.nav-logo {
    max-height: 100%;
}

.head-content-container {
    grid-area: head;
    align-self: center;
    justify-self: center;
    width: 50%;
}

Answer 1

您可以使用 margin auto 并将 text-align 设置为居中，如下所示。我还添加了一个更新的片段。顺便说一句，你不需要 justify-self 和 align-self，除非你出于其他原因使用它们。

.head-content-container {
    grid-area: head;
    align-self: center;
    justify-self: center;
    width: 50%;
    margin: auto;
    text-align: center;
}

.grid-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    grid-template-rows: 500px 500px 500px 500px 200px;
    grid-template-areas: "head head head"
                         "main main main"
                         "portfolio_1 portfolio_2 portfolio_3"
                         "portfolio_4 portfolio_5 portfolio_6"
                         "footer footer footer";
}

.main-header {
    grid-area: head;
    background-image: url(https://placeimg.com/1000/800/tech);
    background-size: cover;
    grid-column: 1/4;
    color: white;
}

.main-nav-wrapper {
    display: grid;
    grid-template-columns: repeat(8, 1fr); 
    height: 100px;
    background-color: #191919;
}

.nav-logo-wrapper {
    grid-column: 1/2;
    padding: .5em;
    max-height: 100%;
}

.nav-logo {
    max-height: 100%;
}

.head-content-container {
    grid-area: head;
    align-self: center;
    justify-self: center;
    width: 50%;
    margin: auto;
    text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
        <nav class="main-nav-wrapper">
            <div class="nav-logo-wrapper">
                <img class="nav-logo" src="img\T-Portfolio_Logo-02.svg" alt="Bolt Development Logo">
            </div>       
        </nav>
        <div class="grid-wrapper">
            <header class="main-header">
                <div class="head-content-container">
                    <h1>Bolt Development</h1>
                </div>
            </header>
        </div>
    </body>

Answer 2

您可以将代码更改为：

.head-content-container {
    grid-area: head;
    **text-align: center;**
}

或者如果你真的想给宽度50%，你也可以加上margin: 0 auto。希望这对您有所帮助！

Answer 3

我能够弄清楚我自己的问题。我最终将 header 设置为显示 flex 并对齐内容。

.main-header {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(https://placeimg.com/1000/800/tech);
    background-size: cover;
    grid-column: 1/4;
    color: white;
}

在 CSS 网格内居中 div

Centering a div inside of a CSS grid

html

css

css-grid