DONT ADD ANYTHING HERE!

Normal

One
Two
Three

flex justify-content align-items

Four
Five
Six
css 
    .center-one {
        display: flex;
        justify-content: center;
        align-items: center;
    }

grid justify-content align items

Seven
Eight
Nine
css 
    .center-two {
        display: grid;
        justify-content: center;
        align-items: center;
    }

grid justify-items align-items

Ten
Eleven
Twelve
css 
    .center-three {
        display: grid;
        justify-items: center;
        align-items: center;
    }

flex justify-items align-items

Thirteen
Fourteen
Fifteen
css 
    .center-four {
        display: flex;
        justify-items: center;
        align-items: center;
    }

Note

Note that justify-items has no effect in flexbox

HTML

code 

    <div class="wrapper">
        <div class="grid-item one">One</div>
        <div class="grid-item two">Two</div>
        <div class="grid-item three">Three</div>
    </div><!--wrapper-->

    <div class="wrapper">
        <div class="grid-item four center-one">Four</div>
        <div class="grid-item five center-one">Five</div>
        <div class="grid-item six center-one">Six</div>
    </div><!--wrapper-->
    
    <div class="wrapper">
        <div class="grid-item seven center-two">Seven</div>
        <div class="grid-item eight center-two">Eight</div>
        <div class="grid-item nine center-two">Nine</div>
    </div><!--wrapper-->
    <div class="wrapper">
        <div class="grid-item ten center-three">Ten</div>
        <div class="grid-item eleven center-three">Eleven</div>
        <div class="grid-item twelve center-three">Twelve</div>
    </div><!--wrapper-->

Notes

  1. justify-content
    The CSS justify-content property defines how the browser distributes space between and around content items along the
    1. main axis of a flex container
    2. inline axis of a grid container
    Values include
    1. start
    2. center
    3. space-between
    4. space-around
    5. space-evenly
  2. align-items
    1. The CSS align-items property sets the align-self value on all direct children as a group
    2. In flexbox, it controls the alignment of items on the cross axis
    3. In grid layout, it controls the alignment of items on the block axis within their grid areas
  3. justify-items
    1. The CSS justify-items property defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis
    2. In grid layouts, it aligns the items inside their grid areas on the inline axis
    3. In flexbox layouts, this property is ignored
    4. In block-level layouts, it aligns the items inside their containing block on the inline axis
    5. For absolutely-positioned elements, it aligns the items inside their containing block on the inline axis, accounting for the offset values of top, left, bottom, and right

References

SO: Centering in CSS Grid
MDN: justify-content
MDN: align-items