justify-content and align-content not working in CSS Grid

Question

I have a grid with 3 rows, 1 column and item of the middle row is a grid itself of 2 columns and 4 rows.

CSS Snippet

.css-grid-container-common-styles{
    height:100vh; /*???*/
    display: grid;
    grid-template-columns: 1fr;  /* 1column*/
    grid-template-rows: auto 15fr 1fr; /* 3 rows. Auto takes height of navigation, remaininign is divided into 2 rows, middle row is 15 times larger than the 3rd row.*/
}

HTML Snippet

<div class="css-grid-container-common-styles"> <!-- first container -->
<nav class="navbar navbar-expand-lg navbar-light bg-light css-grid-item-nav-div-common-styles"> <!-- goes in 1st for -->
</nav>
<div class="css-grid-item-info-div-common-styles"> <!-- this container item is also a container -->
<div class="css-grid-container-practice-create-div-common-styles"> <!-- this is a container --> </div>
</div>
<div class="css-grid-item-footer-common-styles"> foooter goes here
</div>

Question1 - My issue is align-text and justify-text are not working for the embedded container. I want to center the items of the embedded container but they still appear on the start position. I have used the following rule to center the item (a para) but it doesnt work.

.css-grid-item-practice-para1-div-common-styles{
    align-items: center;
    justify-content: center;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

However, if I add display:flex, it works! why?

.css-grid-item-practice-para1-div-common-styles{
    display:flex; /*work if this is added*/
    align-items: center;
    justify-content: center;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

Question 2: The buttons I have added (P1,C1) do not move to center even with display:flex

Following is the complete code

CSS

.body-common-styles {
    background: linear-gradient(45deg,#33b1f8 37%,#6e90f6 100%); /*syntax linear-gradient(direction, color1 limit, color2 limit)*/
    color:white;
    font-family: Helvetica;
    line-height: 1;
}

.div-common-styles{
    background-color:#0F2148;
}

.button-common-styles-normal{
    /*background: radial-gradient(ellipse,#268ff4 5%,#4da3f8 95%);  */
    background-color: #4da3f8;
    border:none;
    color:white;
    border-radius: 8px;
    width:100px; /* sets the width of the content area to 200 px */
    height: 40px;
    box-sizing: border-box;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}   

.button-common-styles-normal:hover {
    background-color:  #268ff4;
}

.center-horizontally-common-styles {
    display: block;
    margin: auto auto;
}

.centre-vertical-common-styles {
   position: fixed; /*Fixed positioning acts similarly to absolute positioning with a couple of differences.*/
   left: 50%; /*creates a space equal to 50% from left creating effect of moving the element towards the center horizontally*/
   top: 50%; /* creates a space equal to 50% from top creating effect of moving the element towards the center vertically*/
   transform: translate(-50%, -50%);
}

.centre-button-vertical-common-styles {
   position: absolute; /*An absolutely positioned element is positioned relative to the first parent element that has a position other than static applied to it. */
   left: 50%; /*creates a space equal to 50% from left creating effect of moving the element towards the center horizontally*/
   top: 50%; /* creates a space equal to 50% from top creating effect of moving the element towards the center vertically*/
   transform: translate(-50%, -50%);
}

.debug-border-common-styles {
    border: 3px solid black;
    height:200px;
    width:400px;
}

.css-grid-container-common-styles{
    height:100vh; /*???*/
    display: grid;
    grid-template-columns: 1fr;  /* 1column*/
    grid-template-rows: auto 15fr 1fr; /* 3 rows. Auto takes height of navigation, remaininign is divided into 2 rows, middle row is 15 times larger than the 3rd row.*/
}


.css-grid-item-nav-div-common-styles{
    grid-column: 1 / -1;
    grid-row: 1 / 2;
}

.css-grid-item-info-div-common-styles{
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    align-self: center;
    justify-self:center;

}

.css-grid-item-footer-common-styles{
    grid-column: 1 / -1;
    grid-row: 3 / -1;
    background-color: white;
    color:black;
}

/* info div is a container. It is continer item in css-grid-container-common-styles and it has two items css-grid-container-info-div-common-styles and css-grid-item-practice-div-common-styles*/
.css-grid-container-practice-create-div-common-styles{
    display:grid;
    grid-template-columns: 1fr 1fr;
    /*grid-template-rows: auto auto auto auto;*/
    height:300px; /* could it be made % ?*/
    width:450px;
    border: 1px solid white;
    border-radius: 8px; 
    background-color:white;
    color:black;
    box-shadow: 3px 3px 3px grey;
}

.css-grid-item-practice-para1-div-common-styles{
    display:flex;
    align-items: center;
    justify-content: center;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.css-grid-item-practice-para2-div-common-styles{
    display:flex;
    align-items: center;
    justify-content: center;    
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

.css-grid-item-practice-para3-div-common-styles{
    display:flex;
    align-items: center;
    justify-content: center;
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

.css-grid-item-practice-button-div-common-styles{
    display:flex;
    align-items: center;
    justify-content: center;
    grid-column: 1 / 2;
    grid-row: 4 / 5;
}



.css-grid-item-create-para1-div-common-styles{
    display:flex;
    align-items: center;
    justify-content: center;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.css-grid-item-create-para2-div-common-styles{
    display:flex;
    align-items: center;
    justify-content: center;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.css-grid-item-create-para3-div-common-styles{
    display:flex;
    align-items: center;
    justify-content: center;
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}

.css-grid-item-create-button-div-common-styles{
    display:flex;
    align-items: center;
    justify-content: center;
    grid-column: 2 / 3;
    grid-row: 4 / 5;
}

HTML

<!DOCTYPE html>

<html>
    <head>
        <title>Coding Jedi</title>
        <link rel="stylesheet" media="screen" href="../common/css/css-reset.css">
        <link rel="stylesheet" media="screen" href="../common/css/common-styles.css">
        <link rel="stylesheet" media="screen" href="../common/css/bootstrap.css">

    </head>
    <body class="body-common-styles">
            <div class="css-grid-container-common-styles">
                <nav class="navbar navbar-expand-lg navbar-light bg-light css-grid-item-nav-div-common-styles">
                    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                    </button>
                    <a class="navbar-brand" href="index.html">CodingJedi</a>
                    <div class="collapse navbar-collapse justify-content-between" id="navbar1">
                        <ul class="navbar-nav">
                            <li class="nav-item active">
                                <a class="nav-link" href="index.html">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="widgets.html">About</a>
                            </li>
                        </ul>                   
                    </div>
                </nav>
                <div class="css-grid-item-info-div-common-styles"> <!-- this container item is also a container -->
                    <div class="css-grid-container-practice-create-div-common-styles"> <!-- this is a container -->
                        <p class="css-grid-item-practice-para1-div-common-styles"> P1. </p>
                        <p class="css-grid-item-practice-para2-div-common-styles"> P2. </p>
                        <p class="css-grid-item-practice-para3-div-common-styles"> P3. </p>
                        <button type="button" class="button-common-styles-normal css-grid-item-practice-button-div-common-styles"> P! </button>                     


                        <p class="css-grid-item-create-para1-div-common-styles"> P4</p>
                        <p class="css-grid-item-create-para2-div-common-styles"> P5</p>
                        <p class="css-grid-item-create-para3-div-common-styles"> P6 </p>
                        <button type="button" class="button-common-styles-normal css-grid-item-create-button-div-common-styles"> C!</button>                        
                    </div>

                </div>
                <div class="css-grid-item-footer-common-styles">
                    footer goes here
                </div>
            </div>
        <script src="../common/javascripts/jquery-3.2.1.js" type="text/javascript"></script>
        <script src="../common/javascripts/bootstrap.js"></script>
    </body>
</html>

Answer 1

Question 2: The buttons I have added (P1,C1) do not move to center even with display:flex

Notice that when you apply the centering rule...

display: flex;
align-items: center;
justify-content: center;

on the p elements, the rule applies to the content of the p (i.e., the text). That's what is actually being centered.

Similarly, when you apply the centering rule to the button element, it is also centering the content of the button (i.e., the text).

You are expecting it to center the button itself. If the rule doesn't center the p it will not center the button siblings either.

If you want to center the button elements, try this:

button {
   align-self: center;
   justify-self: center;
}

https://jsfiddle.net/jz15cLhd/

As to the other problem, I am not seeing it. I get the same result for centering with display: flex and display: grid.

This post may be useful to you: Centering in CSS Grid