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>

Не могу добиться правильного результата: сетка с элементами, центрированными по горизонтали И вертикально в каждой ячейке.Ячейка должна иметь точный размер (100 мм x 70 мм), 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>