如何在网格布局中将卡片 div 居中

Question

我正在尝试创建一个 HTML 布局，它由两列组成。在右栏中，我想显示一个卡片容器，并且在它旁边的每一侧都有一个人字形图标。我正在使用 SCSS 来设计我的布局，但有些地方不对：卡片容器似乎没有居中，实际上它似乎不适合它的容器。

我一直在努力弄清楚为什么会这样，只是想不出解决办法。如果有任何帮助，我将不胜感激！

HTML:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="./test.scss" rel="stylesheet">
    <title>Document</title>
</head>
<body> 
    <div class="container">
        <div class="left-column"></div>
        <div class="right-column">
          <span class="material-icons chevron-left">chevron_left</span>
          <div class="card"></div>
          <span class="material-icons chevron-right">chevron_right</span>
        </div>
    </div>
</body>

SCSS:

.container {
    display: grid;
    grid-template-columns: 35fr 65fr;
  
    .right-column {
      display: grid;
      grid-template-columns: 15fr 70fr 15fr;
      height: 95vh;
  
      span {
        height: 50px;
        margin: 20px;
        font-size: 50px;
        cursor: default;
        display: flex;
        align-items: center;
  
        &:hover {
          font-size: 60px;
        }
  
        &.chevron-left {
          justify-content: center;
        }
  
        &.chevron-right {
          justify-content: center;
        }
      }

      .card {
        width: 100%;
        height: 100%;
      
        margin: 50px;
        border: 3px solid black;
        border-radius: 8px;
        box-sizing: border-box;
        overflow: auto;
    }
  }
}

Answer 1

首先，你的卡片在右栏框外的原因是因为它的高度是其父级的 100% 加上它有边距，从而将它向外推并溢出它的栏它应该包含在其中。为了防止它，使用 calc() 函数，例如： height: calc(100%- 100px) 和 width: calc(100% - 100px) 考虑到 margin: 50px 意味着每个轴总共 100px。
其次，要在右栏中垂直居中所有内容，您需要在 .right-column.
上设置 align-items: center 第三，要让您的卡片也水平居中，请在 .card

上设置 justify-self: center

更新： 由于您的评论指出您只需要顶部和底部边距，因此您应该在卡片上设置 width: 100%，一切都会按预期工作 -你也不需要将你的卡水平居中，因此不需要 justify-self: center 在你的卡上。我编辑了下面的代码片段来解决这个问题。

.container {
  display: grid;
  grid-template-columns: 35fr 65fr;
}
.right-column {
  display: grid;
  grid-template-columns: 15fr 70fr 15fr;
  height: 95vh;
  align-items: center;
}
.right-column span {
  height: 50px;
  margin: 20px;
  font-size: 50px;
  cursor: default;
  display: flex;
  align-items: center;
}
.right-column:hover {
  font-size: 60px;
}

.right-column .chevron-left {
  justify-content: center;
}

.right-column .chevron-right {
  justify-content: center;
}

.right-column .card {
  width: 100%;
  height: calc(100% - 100px);

  border: 3px solid black;
  border-radius: 8px;
  box-sizing: border-box;
  overflow: auto;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <link href="test.css" rel="stylesheet" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="left-column"></div>
      <div class="right-column">
        <span class="material-icons chevron-left">chevron_left</span>
        <div class="card"></div>
        <span class="material-icons chevron-right">chevron_right</span>
      </div>
    </div>
  </body>
</html>

如何在网格布局中将卡片 div 居中

How to center a card div inside a grid-layout

html

css

sass

grid-layout