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

debugcn 发表于 Dev

雨云

我正在尝试为贴纸标签上的打印内容创建布局。因此，我创建了 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观众中有没有巫师可以帮助我？

塞尔格·切尔纳塔

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。