如何将 div 与 css 网格居中?

How to center a div with css-grids?

你可以在这里看到我的项目:https://jsfiddle.net/alphatier/byfvpq8h/2/

.i {
  grid-area: i;
}

.t {
  grid-area: t;
  margin: auto;
}

.grid {
  display: grid;
  grid-gap: 15px;
}

.box {
  display: grid;
  grid-gap: 4px;
  grid-template-areas: "i t";
  margin-bottom: 5px;
}

@media(min-width: 350px) {
  .grid {
    grid-template-columns: repeat(3, 100px);
  }
  .box {
    display: grid;
    grid-gap: 4px;
    grid-template-areas: "i" "t";
    text-align: center;
  }
  .t {
    margin: 0;
  }
}

@media(min-width: 475px) {
  .grid {
    grid-template-columns: repeat(4, 100px);
  }
}

@media(min-width: 590px) {
  .grid {
    grid-template-columns: repeat(5, 100px);
  }
}

@media(min-width: 705px) {
  .grid {
    grid-template-columns: repeat(6, 100px);
  }
}

@media(min-width: 820px) {
  .grid {
    grid-template-columns: repeat(7, 100px);
  }
}

@media(min-width: 935px) {
  .grid {
    grid-template-columns: repeat(8, 100px);
  }
}
<div class="grid">
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
</div>

它显示二维码并为每个二维码显示一个文本。

如果屏幕尺寸 < 350px,布局针对智能手机进行了优化,对此我很满意。但是如果屏幕尺寸>=350px,我不知道如何居中

让我们选择 350px475px 之间的屏幕尺寸,例如 460px。然后,您可以看到 3 个二维码及其文本排成一行。但是在右侧,有很多space。如何将这 3 个二维码居中?

密码

margin: auto

对我不起作用,因为 div.grid 的宽度最大。

justify-content: center 添加到 class .grid
https://jsfiddle.net/byfvpq8h/3/

.i {
  grid-area: i;
}

.t {
  grid-area: t;
  margin: auto;
}

.grid {
  display: grid;
  grid-gap: 15px;
  justify-content: center;
}

.box {
  display: grid;
  grid-gap: 4px;
  grid-template-areas: "i t";
  margin-bottom: 5px;
}

@media(min-width: 350px) {
  .grid {
    grid-template-columns: repeat(3, 100px);
  }
  .box {
    display: grid;
    grid-gap: 4px;
    grid-template-areas: "i" "t";
    text-align: center;
  }
  .t {
    margin: 0;
  }
}

@media(min-width: 475px) {
  .grid {
    grid-template-columns: repeat(4, 100px);
  }
}

@media(min-width: 590px) {
  .grid {
    grid-template-columns: repeat(5, 100px);
  }
}

@media(min-width: 705px) {
  .grid {
    grid-template-columns: repeat(6, 100px);
  }
}

@media(min-width: 820px) {
  .grid {
    grid-template-columns: repeat(7, 100px);
  }
}

@media(min-width: 935px) {
  .grid {
    grid-template-columns: repeat(8, 100px);
  }
}
<div class="grid">
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
  <div class="box"><img class="i" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABtCAYAAACr+O9WAAACt0lEQVR4nO3SwZKjUAxDUf7/p6cXmVVXaISeZCC5rnq7YMs+2bZt+3fF+12tvu/K+aaV13yggQYaaKAJaK1qoE1lVfJOZgFNyAoaaMtZQBOyPg4tdczEnIUlT/VNobWygAYaaBNZQAMNtIkst0FrlYMP2oklGwUaaLu/UfuAJhRoRbTUoZz8rSygiYdy8reygCYeysnfygKaeCgnfyvLZWipasx52h/IKdDELKDtDG/0BK08vNETtPLwRs+vRZt6rUNdhTb8QAMNNNBAe/PebnXTUkCOvnEB7lT3SnNQoL3qXmkOCrRX3SvNQYH2qi11iLs+8yiRvok/y84DzdnP6RO8I2jOfk6f4B1Bc/Zz+gTvCJqzn9MneMfzjVtLnj3Cnf4Mk3860EADDbShwzwezTn2ZOCz5Rzc6avODt0WNNBA+3M2aGa2o984fdXZI2jOcZ2ALTR11uqB3buYDzTQxAUS37gFGmhyftAW6uPRWkdozUlkc7K0CjTQDhuDFijQvhntKgCnrzt7KouZHzTQQDuVxcwPGmigncpi5p8BaBzFraksibvsPNBAA02eA9qJ+jg0J0xiIWfp1KGcvE7f4DegOXlBAw000EoLJY55JchViP+/Aw000EBbnXtlftDMuVfmr6FJWw3UFLSbJdFHmQNaMEuijzIHtGCWRB9lDmjBLIk+yhwJLXWs1eO2DtXKIh63tQ9oThbQxEMtLAkaaDdDa5VzqMZxU7MTOzs9QFuYndjZ6QHawuzEzk4P0BZmJ3Z2eoC2MDuxs9NDQlMWUsI9HS3xlBJ7gQYaaKCB9nA0Z45zvBaIUqCBBhpoQ3NAK6I53yizmwc+Kud2oIm/aRVooIE2UaCBpqO1Fmj0dP9UiT9UYi5ooK0XaKC97fm1aFMvuMDy7AaI0tf5BjTQQAMNNNA+Ce0HIleXZZmQRJwAAAAASUVORK5CYII="
    /><span class="t">text about the qrcode</span></div>
</div>

更多CSS网格提示请参考此
https://css-tricks.com/snippets/css/complete-guide-grid/

.grid {
  display: grid;
  grid-gap: 15px;
  justify-content: center;
}

编辑 1:

这就是您的起点。

使用 justify-content: center 给你这个。

按照@abhishek-soni 的建议
使用 justify-content: space-around 给你这个。

选择最适合您的需求@Alpha

完成! 属性 justify-content 告诉网格在额外 space 的情况下如何对齐项目。它有多个有效值,如 start(左)、end(右)和 center(中)。你要的那个是center.

此属性应用于网格元素

这是笔。 Link to pen

此外,这里还有一些文档。 Link to docs


但是,在我看来,justify-content: space-around; 看起来更适合您的情况。当然取决于你,只是陈述我的意见。

我发现使 div 居中的最简单方法是使用网格:

html:

<article class="grid-parent">
    
    <div>"I'm a div!</div>
    
</article>

.grid-parent {
    display: grid;
    place-items: center;
}

CSS 中的 place-items 属性 是 shorthand 用于 align-items 和 justify-items 属性,将它们组合成一个声明。

进一步了解:https://css-tricks.com/almanac/properties/p/place-items/