无法使用 css 中的网格使元素居中

Question

我刚刚使用 html 和 css 制作了一个卡片组件，但在使用网格时无法居中图像。该页面在更大的屏幕上很好。对于更大的屏幕，我使用 flex box 来对齐信息和图像，对于移动视图，我使用网格布局来垂直对齐内容并使其居中我使用 justify-content: center 属性当我切换到移动视图时，信息部分居中但图像不居中。我还使用媒体查询进行响应式设计。

这是我的 css 代码：

* {
  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-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 ;
    place-items: center;
}

.inf
{
    padding-bottom: 0.7em;
}



}

这是我的 html 代码：

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

Answer 1

尝试在媒体查询中添加justify-items: center;

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

Answer 2

在小屏幕中将margin:auto添加到.card2。您只需使用以下

更新您的 CSS 代码

@media (max-width: 700px)
    .card2{
      width: 70vw;    
      height: 35vh;
      background-image: url(../images/image-header-mobile.jpg);
      background-size: 100% 100%;
      grid-row: 1;
      border: 2px solid green;
      margin: auto;
    }
}

Answer 3

添加 class text-center
代码：
<div class="text-center"><img src="..."></div>

无法使用 css 中的网格使元素居中

Cannot center the element using grid in css

html

css

centering

media-queries

css-grid