Question

我有一个列表，可以添加或删除项目。列表需要垂直和水平居中于它的容器。为此，我使用了以下样式：

transform: translate(-50%, -50%);
left: 50%;
top: 50%;
position: absolute;

当元素添加到列表中时，用户应该能够向上和向下滚动以查看所有元素。但是根据我所拥有的，用户可以滚动但列表的顶部被切断。我相信这是因为我已经使用了变换和前50％。

如何让列表div水平和垂直居中并在列表溢出时滚动没有问题？

这是我的fiddle和我所拥有的。

我正在使用Angular 4。

Answer 1

您可以将max-height设置为list并将overflow-y设置为auto，这样每当列表项增加时，您都会在其中进行滚动。

.list {
    border: 1px solid red;
    width: 200px;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    position: absolute;
    max-height: 100%; // Added
    overflow-y: auto;  // Added
}

Answer 2

尝试使子包装器可滚动并具有如下固定高度：

.list{ max-height: 100%; overflow-y: scroll; }

在不切断第一个元素的情况下，进行绝对定位，居中的div滚动

2 个答案: