可在 html/css 中自定义居中框网格？

Question

这就是我的网站目前的样子：

我试图使盒子具有固定的方形宽度，并希望它们始终水平和垂直居中。要么喜欢

[][][][]

或

[][]

[][]

目前它们向一侧倾斜：

有没有一种方法可以在没有 JavaScript 的情况下完成这项工作？

当前 html：

            <div class="grid-item">
                <a href="https://download.tails.net/tails/stable/tails-amd64-6.0/tails-amd64-6.0.img">
                    <img class="app-image" src="assets/tails.png" height="100px">
                    <div class="app-title">Tails 6</div>
                    <div class="app-description">Amnesic live system.</div>
                </a>
            </div>

当前CSS：

html {
  height: 100%;
  background-color: #0f0f0f;
  margin: 0;
}

.body-default {
  color: #fff;
  display: flex;
  height: 100%;
  justify-content: center ;
  align-items: center;
  margin: 0;
  font-family: sans-serif;
}

.grid-container {
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 200px;
  grid-gap: 20px;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.grid-item {
  border: 2px solid #4e4e4e;
  padding: 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-radius: 12.5px;
  background-color: #242424;
  transition: transform 0.2s cubic-bezier(0,.75,.25,1);
  transform-origin: center;
  backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-font-smoothing: subpixel-antialiased;
}

.app-title {
  font-weight: bold;
  font-size:15px;
  margin-bottom: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app-description {
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #808080;
}

.app-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 100px;
  margin: auto;
  padding: 10px;
}

.grid-item:hover {
  transform: scale(1.05);
}

.centered-box {
  text-align: center;
  margin: 0 auto;
  width: 50%;
  padding: 20px;
}

Answer 1

  height: 100%;
  margin: 0;
}

.body-default {
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0;
  font-family: sans-serif;
}

.grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  max-width: 100%;
}

.grid-item {
  border: 2px solid #4e4e4e;
  width: 200px; /* Adjust this value as needed for your square width */
  height: 200px; /* Same as width to maintain square shape */
  text-align: center;
  border-radius: 12.5px;
  background-color: #242424;
  transition: transform 0.2s cubic-bezier(0,.75,.25,1);
  backface-visibility: hidden;
}

.app-title {
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app-description {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #808080;
}

.app-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  margin: auto;
  padding: 10px;
}

.grid-item:hover {
  transform: scale(1.05);
}