在网格布局上居中子 Div答案

【问题标题】：Centering a Child Div over a Grid Layout在网格布局上居中子 Div
【发布时间】：2020-09-24 21:26:29
【问题描述】：

我创建了一个基本网格，它覆盖了整个页面，使用 1fr 表示列，1fr 表示行数。此网格是使用父 div 创建的。

子 div 是我想要在分配的网格中间居中的。我已经分配了绝对的子位置和相对的父位置，并使用了以下代码，几个来源都提到了这些代码用于居中，当我删除网格时它确实可以使元素居中，并为父元素。

但是为什么我不能将 div 放在网格中的父级的中心？垂直地，它不会移动，更糟糕的是，当我检查页面时，网格本身似乎已经移动了。知道我的网格发生了什么以及如何将元素居中居中吗？

.parent-wrapper{
  display:grid;
  grid-template-columns:repeat(8,minmax(min-content,1fr));  
  grid-template-rows:repeat(3,1fr);
  position:relative;
  background: red;  /* ADDED TO SEE BETTER */
  height: 200px;    /* ADDED TO SEE BETTER */
}

.child-wrapper{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

p{
  text-align:center;
}

<div class="parent-wrapper">
  <div class="child-wrapper">
    <h1>CENTER ME</h1>
    <p>centered paragraph</p>
  </div>     
</div>

【问题讨论】：

你的.parent-wrapper没有身高，有什么原因吗？
高度应该是repeat(3, 1fr)——屏幕的高度分解成三个分数单位。

标签： html css

【解决方案1】：

尝试使用高度

.parent-wrapper{
  display:grid;
  grid-template-columns:repeat(8,minmax(min-content,1fr));  
  grid-template-rows:repeat(3,100px);
  position:relative;
}

.child-wrapper{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

p{
  text-align:center;
}

<div class="parent-wrapper">
  <div class="child-wrapper">
      <h1>CENTER ME</h1>
      <p>centered paragraph</p>
  </div>     
</div>

【讨论】：

行得通！我不确定为什么在宽度上使用小数单位是可以的，但它在高度上使用小数单位。当我按照您的建议切换到像素时，它确实有效。