CSS制作具有居中内容的网格

Question

我正在尝试为不干胶标签上的打印内容创建布局。 因此，我创建了div并根据需要使用display:grid;来分隔空间。 item1，item2和item3应该彼此重叠，并在单元格中居中。

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 70mm; // Seems useless
  align-items: center;
}

.cell {
  border-style: dashed;
  width: 100mm;
  height: 70mm;
  align-content: center;
}

.item1 {
  z-index: 0;
  width: 40mm;
  height: 40mm;
  background-color: red;
  position: relative;
}

.item2 {
  z-index: 1;
  width: 20mm;
  height: 20mm;
  background-color: blue;
  position: relative;
}

.item2 {
  z-index: 2;
  width: 10mm;
  height: 10mm;
  background-color: green;
  position: relative;
}

<div class="grid">
  <div class="cell">
    <div class="item1"></div>
    <div class="item2"></div>
    <img class="item3" src="./src.png" />

  </div>
  <div class="cell">
    <div class="item1"></div>
    <img class="item2" src="./src.png" />
    <div class="item3"></div>
  </div>
  <div class="cell">
    <div class="item1"></div>
    <img class="item2" src="./src.png" />
    <div class="item3"></div>
  </div>
</div>

我无法获得正确的结果：一个网格，其中每个单元格中的项目水平和垂直居中。单元格应具有精确的尺寸（100mmx70mm），自页面打印以来，每行2个单元格。

观众中是否有CSS向导可以帮助我？

Answer 1

您需要做的只是absolute定位和基于百分比的translate转换。

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 70mm; // Seems useless
  align-items: center;
}

.cell {
  border-style: dashed;
  width: 100mm;
  height: 70mm;
  align-content: center;
  position: relative;
}

.cell>*{
  position: absolute;
  left:50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.item1 {
  z-index: 0;
  width: 40mm;
  height: 40mm;
  background-color: red;
}

.item2 {
  z-index: 1;
  width: 20mm;
  height: 20mm;
  background-color: blue;
}

.item2 {
  z-index: 2;
  width: 10mm;
  height: 10mm;
  background-color: green;
}

<div class="grid">
  <div class="cell">
    <div class="item1"></div>
    <div class="item2"></div>
    <img class="item3" src="./src.png" />

  </div>
  <div class="cell">
    <div class="item1"></div>
    <img class="item2" src="./src.png" />
    <div class="item3"></div>
  </div>
  <div class="cell">
    <div class="item1"></div>
    <img class="item2" src="./src.png" />
    <div class="item3"></div>
  </div>
</div>