Centering in CSS Grid

This answer has two main sections:

Understanding how alignment works in CSS Grid.
Six methods for centering in CSS Grid.

If you're only interested in the solutions, skip the first section.

The Structure and Scope of Grid layout

To fully understand how centering works in a grid container, it's important to first understand the structure and scope of grid layout.

The HTML structure of a grid container has three levels:

the container
the item
the content

Each of these levels is independent from the others, in terms of applying grid properties.

The scope of a grid container is limited to a parent-child relationship.

This means that a grid container is always the parent and a grid item is always the child. Grid properties work only within this relationship.

Descendants of a grid container beyond the children are not part of grid layout and will not accept grid properties. (At least not until the subgrid feature has been implemented, which will allow descendants of grid items to respect the lines of the primary container.)

Here's an example of the structure and scope concepts described above.

Imagine a tic-tac-toe-like grid.

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

enter image description here

You want the X's and O's centered in each cell.

So you apply the centering at the container level:

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

But because of the structure and scope of grid layout, justify-items on the container centers the grid items, not the content (at least not directly).

enter image description here

article {  display: inline-grid;  grid-template-rows: 100px 100px 100px;  grid-template-columns: 100px 100px 100px;  grid-gap: 3px;  justify-items: center;}
section {    border: 2px solid black;    font-size: 3em;}

<article>    <section>X</section>    <section>O</section>    <section>X</section>    <section>O</section>    <section>X</section>    <section>O</section>    <section>X</section>    <section>O</section>    <section>X</section></article>

Center a whole CSS grid with respect to the whole page

You could try this

Instead of display: inline-grid;

Keep it: display: grid;

And add

width: fit-content;

in both the containers

.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto auto auto auto auto;
background-color: #c8a2c8;
padding: 5px;
text-align: center;
margin: auto;
width: -moz-fit-content; /* For Mozilla firefox*/
width: -webkit-fit-content; /* For Google Chrome */
width: fit-content;
} 

.grid-container2 {
display: grid;
grid-template-columns: 40px 40px 40px 40px 40px 40px 40px 40px 40px;
background-color: #c8a2c8;
padding: 5px;
text-align: center;
margin: auto;
width: -moz-fit-content; /* For Mozilla firefox*/
width: -webkit-fit-content; /* For Google Chrome */
width: fit-content;
}

CSS Grid not centering the top row

First, there is an error in your code : in your CSS, you specify rules for the id : #about-container but it doesn't exist in your HTML (it's a class in there).

Second, your code doesn't yield the result you have in your image (it seems you are using the property text-align:center; that I can't ssee in the code you share).

To answer your question, you can center the first element by using : .about { width:50%; margin:0 auto; }
With your example, it would be (I also correted both errors I pointed out above) :

#about-container {
  grid-area: first;
}

.about {
  width: 50%;
  margin: 0 auto;
}

#ul-first {
  grid-area: second;
  text-align: center;
}

#ul-second {
  grid-area: third;
  text-align: center;
}

#ul-third {
  grid-area: fourth;
  text-align: center;
}

.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: 
    "first first" 
    "second third" 
    "fourth fourth";
}

<section class="footer-links">
  <div id="about-container">
    <div class="about">
      <h1>Title</h1>
      <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, aperiam quaerat? Nam reprehenderit, amet minus illum natus facere accusamus aut voluptatem. Sapiente ipsa praesentium unde, voluptatem assumenda facilis asperiores eum!</p>
    </div>
  </div>
  <div class="list" id="ul-first">
    <ul>
      <li><a href="#">Why Buy From Us</a></li>
      <li><a href="#">Company Policy</a></li>
      <li><a href="#">Maintenance</a></li>
      <li><a href="#">Financing</a></li>
    </ul>
  </div>
  <div class="list" id="ul-second">
    <ul>
      <li><a href="#">Request a Quote</a></li>
      <li><a href="#">Get in Touch with Us</a></li>
      <li><a href="#">Book Preventive Maintenance</a></li>
    </ul>
  </div>
  <div class="list" id="ul-third">
    <ul>
      <li><a href="#">Nissan GT-R</a></li>
      <li><a href="#">Mitsubishi Lancer</a></li>
      <li><a href="#">Toyota Corolla Touring</a></li>
      <li><a href="#">McLaren P1</a></li>
    </ul>
  </div>
</section>

I need help centering text in the center of CSS Grid

To align the text, you could use the line-height approach, but that is not very responsive.

Since you already have the grid layout, you can keep that same idea and add a helper element, like a <span>. Doing that, give you more options to alight the actual text.

Here is an example of how your new HTML would look like:

<main>
    <span>Main</span>
</main>

And the CSS for that would be:

main {
    grid-column: 4/13;
    grid-row: 2/4;
    background-color: darksalmon;
    display: grid;
}

main > * {
    margin: auto;
}

Centering CSS grid divs with iFrame and Img

Remove width/height attributes from iframe, make it flexible with CSS, also remove inline styles from you images and make it responsive.
Also, make .charts flex. In this case you can align this cells' content.

See CSS Code snippet part comments for more details.

Expand Code snippet to fullpage, to see example

.plotly-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* add grid gaps (gaps between rows and columns) */
  column-gap: 1rem;
  row-gap: 1rem;
}

/* make cell flex */
.charts {
  display: flex;
  justify-content: center;
}

.charts iframe {
  width: 100%;
  /* you can add ratios to your iframe in other way */
  aspect-ratio: 6/5;
}

/* add styles to you images, make it responsive */
.charts img {
  height: auto;
  width: 100%;
}

/* added for example purposes */
.charts iframe, .charts img {
  max-width: 600px;
}

<div class="plotly-charts">
  <div class="charts">
    <iframe frameborder="0" scrolling="no" src="//plotly.com/~mathewsjoyy/3.embed?logo=false&link=false&autosize=true"></iframe>
  </div>
  <div class="charts">
    <iframe frameborder="0" scrolling="no" src="//plotly.com/~mathewsjoyy/1.embed?logo=false&link=false&autosize=true"></iframe>
  </div>
  <div class="charts">
    <img src="https://dummyimage.com/600x400/000/fff" alt="Word Cloud Positive">
  </div>
  <div class="charts">
    <img src="https://dummyimage.com/600x400/000/fff" alt="Word Cloud Negative-Neutral">
  </div>
</div>

Cannot center the element using grid in css

Try to add justify-items: center; in media query

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  font-size: 15px;
}

.attribution {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  font-size: 1rem;
 color: white;
}

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: hsl(233, 47%, 7%);
    
}

.card
{
  
    font-size: 1rem;
    background-color: hsl(244, 38%, 16%);
    display: flex;
    width: 70vw;
    height: 50vh;
    box-shadow: 0 10px 20px -6px #000;
}

a{
    text-decoration: none;
}

.card1, .card2
{
    flex: 1;
}

.card2{
    height: 50vh;
    background-image: url(../images/image-header-desktop.jpg);
    background-size: 100% 100%;

}
.card1a, .card2a, .card3a
{
 
    font-size: 1rem;
}

.card1{
    display: grid;
    color: hsl(0, 0%, 100%);
    padding-left: 4em;
    padding-right: 5em;
    padding-top: 3em;
    padding-bottom: 3em;
    grid-template-rows: 10em 9em ;
}

.insights
{
    color: hsl(277, 64%, 61%);
}

.card1a{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 3rem;
}

.card2a
{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    width: 60%;
    color: hsla(0, 0%, 100%, 0.75);
}

.card3a
{
    display: flex;
    justify-content: space-between;
    width: 55%;
    font-family: 'Lexend Deca', sans-serif; 
}

.info
{
    color: hsla(0, 0%, 100%, 0.6);
}

@media (max-width: 700px)
{
    .card1a, .card2a, .card3a
    {
        border: 2px solid green;
        padding-bottom: 1em;
    }
    .card
    {
        display: grid;
        justify-items: center;
        justify-content: center;
        width: 70vw;
        height: 90vh;
        border: 2px solid red;
    }

   .card1a
   {
       font-size: 2rem;
       justify-content: center;
       width: 60vw;
       text-align: center;
   }

   .container
   {
       width: 100vw;
       height: 100vh;
   }
   .card2a{
       font-size: 0.9rem;
       width: 44vw;
       text-align: center;
   }
   .card3a{
       width: 100%;
       display: grid;
       justify-content: center;
   }
   .card2{
    width: 70vw;    
    height: 35vh;
    background-image: url(../images/image-header-mobile.jpg);
    background-size: 100% 100%;
    grid-row: 1;
    border: 2px solid green;
    
}
.info
{
   font-size: 0.8rem;
}

.card1
{
    grid-template-rows: auto ;
    justify-items: center;
}

.inf
{
    padding-bottom: 0.7em;
}



}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  
  <title>Frontend Mentor | Stats preview card component</title>
  <link rel="stylesheet" type="text/css" href="./style/styles.css">

  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap" rel="stylesheet">




  <style>
    .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
  </style>
</head>
<body>

  <div class="container">
    <div class="card">
      <div class="card1">

        <div class="card1a">
          Get <span class="insights">insights</span> that help your business grow.
        </div>
       
        <div class="card2a">
          Discover the benefits of data analytics and make better decisions regarding revenue, customer 
        experience, and overall efficiency.
        </div>
        
        <div class="card3a">
          <div class="inf">10k+ <br> <span class="info">companies</span></div>
          <div class="inf">314 <br> <span class="info">templates</span></div>
          <div class="inf">12M+ <br> <span class="info">queries</span></div>
         
        </div>
       
      </div>

      <div class="card2">
        
       
      </div>
    
    </div>
  </div>

 
  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Abhijeet John Kujur</a>.
  </div>
</body>
</html>

Center a grid container vertically and horizontally

Instead of justify-content: center use justify-items: center.

.wrapper {  display: grid;  grid-template-columns: 1fr;  grid-template-rows: 100vh;  align-items: center;  justify-items: center; /* adjusted */}

<div class="wrapper">  <div class="centerthis">loremloremlorem</div></div>

Centering in CSS Grid