如何使用 css-grids 使 div 居中？

【问题标题】：How to center a div with css-grids?如何使用 css-grids 使 div 居中？
【发布时间】：2017-07-23 14:17:09
【问题描述】：

你可以在这里看到我的项目：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，我不知道如何居中。

让我们在350px 和475px 之间选择一个屏幕尺寸，例如，460 像素。然后，您可以在一行中看到 3 个带有文本的二维码。但是在右侧，有很多空间。如何将这 3 个二维码居中？

代码

margin: auto

不适用于我，因为div.grid 的宽度最大。

【问题讨论】：

    标签： html css responsive-design css-grid


    【解决方案1】：

    将justify-content: center 添加到类.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

    【讨论】：

      【解决方案2】：

      完成！ 属性justify-content 告诉网格在多余空间的情况下如何对齐项目。它有多个有效值，如start（左）、end（右）和center（中）。你要的是center。

      此属性应用于网格元素

      这是笔。 Link to pen

      另外，这里有一些文档。 Link to docs

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

      【讨论】：

        【解决方案3】：

        我发现让 div 居中最简单的技术是使用网格：

        html: 

        <article class="grid-parent">
    
    <div>"I'm a div!</div>
    
</article>
        .grid-parent {
    display: grid;
    place-items: center:
}

        CSS 中的 place-items 属性是 align-items 和 justify-items 属性的简写，将它们组合成一个声明。

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

        【讨论】：

        • 这真的有效吗？运行 sn-p 并不能真正显示这里发生了什么。
        • 您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。
        猜你喜欢
        • 2012-10-25
        • 1970-01-01
        • 2020-06-21
        • 2014-08-31
        • 1970-01-01
        • 2012-01-15
        • 1970-01-01
        • 2023-01-23
        • 2011-06-24
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode