CSS网格居中[重复]答案

【问题标题】：CSS Grid Centering [duplicate]CSS网格居中[重复]
【发布时间】：2021-05-25 07:14:46
【问题描述】：

我在垂直对齐网格单元格的中心/中间时遇到问题。

我有以下代码：

.grid-container {
  display: grid;
  width:100%;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  padding: 10px;
  color: black;
}

.itemBox {
  border: 1px solid black;
  box-sizing: content-box;
  text-align: center;
  vertical-align: middle;
}

   <div class="grid-container tab active" id="pageHome">
      <div class="itemBox content">1</div>
      <div class="itemBox"><span class="test">2</span></div>
      <span class="itemBox">3</span>
      <div class="itemBox s4x1">4</div>
      <div class="itemBox s1x2">5</div>
      <div class="itemBox">6</div>
      <div class="itemBox">7</div>
      <div class="itemBox">8</div>  
      <div class="itemBox s1x2">9</div>
      <div class="itemBox">10</div>
      <div class="itemBox">11</div>  
      <div class="itemBox">12</div>  
    </div>

这会产生

但是如果没有边框折叠到中间，我无法让数字在框中居中，就像这样：

如果我添加

align-items: center;

知道如何解决这个问题吗？

【问题讨论】：

请同时显示您的 html。最好是minimal reproducible example
我已经用所需的 html 更新了问题

标签： css css-grid

【解决方案1】：

你可以使用display:flex来实现这个

.grid-container {
  display: grid;
  width:100%;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  padding: 10px;
  color: black;
}
.s2 {
grid-row: span 2;
}
.itemBox {
  border: 1px solid black;
  box-sizing: content-box;
  display:flex;
  justify-content: center;
  place-items: center stretch;
}

<div class="grid-container tab active" id="pageHome">
      <div class="itemBox content">1</div>
      <div class="itemBox"><span class="test">2</span></div>
      <span class="itemBox">3</span>
      <div class="itemBox s1">4</div>
      <div class="itemBox s2">5</div>
      <div class="itemBox">6</div>
      <div class="itemBox">7</div>
      <div class="itemBox">8</div>  
      <div class="itemBox s1x2">9</div>
      <div class="itemBox">10</div>
      <div class="itemBox">11</div>  
      <div class="itemBox">12</div>  
    </div>

【讨论】：

谢谢 - 正是我需要的..

【解决方案2】：

为.itemBox 类使用一些行高

 .itemBox {
            border: 1px solid white;
            box-sizing: content-box;
            text-align: center;
            vertical-align: middle;
            line-height:100px;
        }

【讨论】：

【解决方案3】：

.itemBox {
 border: 1px solid white;
 height: 100px;
 line-height: 100px;
 text-align: center;
}

要垂直对齐 div 内的文本，您必须使“line-height”属性等于 div 容器的高度。

【讨论】：