Css Grid子项未居中答案

【问题标题】：Css Grid Child item not centeringCss Grid子项未居中
【发布时间】：2021-03-25 07:49:00
【问题描述】：

我正在尝试使用 CSS 网格的布局。在标题中，我有一个 div，其中包含一个名为 logo 的类，我希望它垂直对齐。

这是完整的代码（查看全屏以查看问题）：

html,
body {
  height: 100%;
}

.container {
  display: grid;
  height: 100%;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "h h" "s m" "f f";
  grid-gap: 10px;
}

.header {
  grid-area: h;
  background-color: red;
}

.header .logo {
  display: inline-grid;
  padding: 5px;
  border: 1px solid #ccc;
  align-content: center;
}

.sidebar {
  grid-area: s;
  background-color: grey;
}

.main {
  grid-area: m;
  background-color: purple;
}

.footer {
  grid-area: f;
  background-color: blue;
}

<div class="container">
  <div class="header">
    <div class="logo">
      <img src="https://via.placeholder.com/50" alt="">
    </div>
  </div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main Content</div>
  <div class="footer">Footer</div>
</div>

我尝试过：align-content: center 和 justify-self: center，但它没有从顶部移动。

如何使用 CSS 网格垂直对齐标题中的类徽标？

【问题讨论】：

标签： css css-grid

【解决方案1】：

这是你想做的吗

<!doctype html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title></title>

  <style>
    html,
    body {
      height: 100%;
    }
    
    .container {
      display: grid;
      height: 100%;
      grid-template-rows: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr;
      grid-template-areas: "h h" "s m" "f f";
      grid-gap: 10px;
    }
    
    .header {
      padding: 70px 0;     /* this code */
      grid-area: h;
      background-color: red;
    }
    
    .header .logo {
      display: inline-grid;
      padding: 5px;
      border: 1px solid #ccc;
    }
    
    .sidebar {
      grid-area: s;
      background-color: grey;
    }
    
    .main {
      grid-area: m;
      background-color: purple;
    }
    
    .footer {
      grid-area: f;
      background-color: blue;
    }
  </style>

</head>

<body>

  <div class="container">
    <div class="header">
      <div class="logo">
        <img src="https://via.placeholder.com/150" alt="">
      </div>
    </div>
    <div class="sidebar">Sidebar</div>
    <div class="main">Main Content</div>
    <div class="footer">Footer</div>
  </div>

</body>

</html>

其他选项

 .header {
    display: table;
    overflow: hidden;
    height: 500px;
    grid-area: h;
    background-color: red;
  }

  .header .logo {
    display: table-cell;
    vertical-align: middle;
    padding: 5px;
    border: 1px solid #ccc;
    
  }

【讨论】：

对不起，我的意思是垂直居中。它应该在左侧，但在标题的垂直中心。只有在整页上有问题时，您才能看到该问题。我已经发布了截图
好的，我在等
这是您想要的图像吗？我附上了截图。
好的，现在我明白了，我马上更新答案。
抱歉，如果标题在运行时调整大小，使用 px 不会自动居中

【解决方案2】：

这就是你所需要的：

.header .logo {
  display: inline-grid;
  padding: 5px;
  border: 1px solid #ccc; //remove this
  align-content: center;
  height: 100%; //This will work for responsive screens as well.
}

【讨论】：