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

Question

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

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

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

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

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

如果 div 不超过 400 像素(更少的图 block )，图 block 仍应居中 v 和 h。

当 tiles 容器超过屏幕高度时，它应该可以滚动。这应该以第一个图 block 位于顶部而底部的图 block 应该被隐藏的方式发生。

这里是我的意思的草图:

红色方 block 是第一 block 方 block 。

为了实现这一点，我所做的是将图 block 容器设为绝对位置，并为其指定最大宽度和最大高度。

.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 居中，当达到最大高度时它滚动，当只有很少的图 block 时它居中 v 和 h。

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

在我附加的 fiddle 示例中，容器的最大宽度为 400px，但在 294px 后停止扩展。

如果我使用 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