Técnicas de Alineamiento antes de CSS Grid - table-cell

:root {
  --box-size: 90px;
  --element-size: 30px;
}

.box {
  height: var(--box-size);
  width: var(--box-size);
  display: table-cell;
}

.element {
  width: var(--element-size);
  height: var(--element-size);
  display: inline-block;
}

.box:nth-child(1),
.box:nth-child(2),
.box:nth-child(3) {
  text-align: left;
}
.box:nth-child(4),
.box:nth-child(5),
.box:nth-child(6) {
  text-align: center;
}
.box:nth-child(7),
.box:nth-child(8),
.box:nth-child(9) {
  text-align: right;
}

.box:nth-child(3n + 1) {
  vertical-align: top;
}
.box:nth-child(3n + 2) {
  vertical-align: middle;
}
.box:nth-child(3n + 3) {
  vertical-align: bottom;
}