Centering a div inside of a CSS grid

Question

I am learning to write HTML/CSS/JS and I am creating some mock websites to learn as I go. I started venturing into CSS Grid and am struggling to center align horizontally and vertically an item within a grid box. I find Grid very powerful in creating layouts and for some reason I am failing to understand this portion. I want to center the head-content-container in the header.

In doing research I found 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 is a link to my github repo and below is a snippet of my code. Thank you in advance for any help you can give me.

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

EDIT: Forgot to add HTML snippet.

.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%;
}

Hi, an html snippet accompanying the provided css would help getting better response. — Gleb Kostyunin, Dec 28 '17 at 21:11

score 2 · Accepted Answer · answered Dec 28 '17 at 23:57

I was able to figure out my own question. I ended up setting the header to display flex and aligning the content.

.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;
}

score 0 · Answer 2 · answered Dec 28 '17 at 21:48

You can use margin auto and set text-align to center, as below. I also added an updated snippet. BTW, you will not need justify-self and align-self, unless you are using them for some other reasons.

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

Thank you. How would I vertically align it in the center as well? — Mike Tallerico, Dec 28 '17 at 22:06
Which one, you mean the label Bolt Development? You want it to be vertically aligned with respect to what? The entire container so it will be placed almost at the middle of screen? — orabis, Dec 28 '17 at 22:09
I would like the center vertically and horizontally the "head-content-container" inside the "main-header". — Mike Tallerico, Dec 28 '17 at 22:17
Could you provide a mock screenshot so I can apply the required accordingly? — orabis, Dec 28 '17 at 22:19
I figured it out. I guess I was overthinking it and when you mentioned not using the justify and align self I realized that is more for the grid containers themselves. Thanks for the help and checking back. I am a real newb but enjoy figuring it out as much as the 3nd product. — Mike Tallerico, Dec 30 '17 at 00:15

score 0 · Answer 3 · answered Dec 28 '17 at 22:11

0

You could change your code to this:

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

Or if you really want to give a width of 50%, you can add margin: 0 auto too it. Hope this helps!

answered Dec 28 '17 at 22:11

abidishajia

222
1
6
15

Centering a div inside of a CSS grid

3 Answers3