将div垂直居中放置在网格中放大后的div的左侧和右侧

Question

我在一个网格中有ul个div，它们的大小和距离都相同。当用户选择一个div时，它会放大。这使该div左右两侧的div看起来很糟糕。我希望它们垂直居中，这样看起来就不会偏离。这是我所拥有的照片：

这就是我想要的：

我当前的CSS（我正在使用SASS）是

#grid {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    list-style-type: none;

    li {
        display: inline-block;
        overflow-y: auto;
        text-align: right;
        vertical-align: top;
        width: 140px;
        height: 140px;
        background: #000;
        padding: 10px;
        margin: 5px;
        cursor: pointer;
    }

    .selected {
        width: 250px;
        height: 250px;
    }
}

当用户选择一个div时，我给它分配了类.selected，因此它比其他的更大。

此外，我该如何为居中/放大设置动画？

Answer 1

您可以使用vertical-align: middle使垂直对齐居中。要设置动画，可以在all或仅在width和height上添加过渡效果，如下所示：

.box {
  width: 100px;
  height: 100px;
  background: teal;
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  transition: all 0.2s;
  or transition: width 0.2s, height 0.2s;
}

.selected {
  width: 250px;
  height: 250px;
  transition: all 0.2s;
}