html - 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

您所需要的只是绝对定位和基于百分比的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>