Css make a grid with centered content - html

Question

I'm trying to create a layout for print content on sticker label.
So, I create div and use display:grid; to divide space as I want.
The item1, item2, and item3 should overlap each other and centered in the cell.
.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>
I can't achieve the correct result: A grid with items centered horizontally AND vertically in each cell. The cell should have precise size (100mmx70mm), 2 cells per row since the page should be printed.
Is there any CSS wizard in the audience that can help me?

Answer 1

All you need is absolute positioning and translate transformations based on percentage.
.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>