在垂直和水平居中绝对位置元素时设置最大宽度和高度

Question

我试图在满足其他几个条件的同时使 div 居中。

我的 UI 是一组动态添加但宽度固定的图块。

我希望这组图块始终居中。垂直和水平 (v & h)。

它也不应该超过一定的宽度。对于此示例，假设最大宽度为 400 像素。

如果在向其中添加图块时 div 超过 400 像素，它应该将下一个图块分成不同的行。发生这种情况时，div 应该再次居中 (v & h)。

如果 div 不超过 400 像素（图块较少），图块仍应居中 v & h。

当瓷砖容器超过屏幕的高度时，它应该变成可滚动的。这应该以这样一种方式发生，即第一个瓷砖将放在顶部，而底部的瓷砖应该被隐藏。

这是我的意思的草图：

红色瓷砖是第一块瓷砖。

所以我为实现这一目标所做的就是将磁贴容器的位置设为绝对位置，并为其设置了最大宽度和最大高度。

.tile-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate( -50%, -50% );
  border: 2px solid green;
  max-width: 400px;
  max-height: 100vh;
  overflow-y: auto;
}

这样它总是以 v & h 为中心，当达到最大高度时它会滚动，当只有很少的图块时它会以 v & h 为中心。

但问题是，它没有达到最大宽度。

在我附加的小提琴示例中，容器的最大宽度为 400 像素，但在 294 像素后停止扩展。

如果我使用 flex 来执行此操作，它会弄乱第一个图块应位于顶部的可滚动部分。

我在这里做错了什么？

这里是fiddle。

Answer 1

改变你的scss如下：

.tile-container {
border: 2px solid green;
max-width: 400px;
max-height: 100vh;
overflow-y: auto;
}

.container {
border: 2px solid;
width: 100%;
height: 100vh;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}

这里更新了jsfiddle