css - Bootstrap 4 : Keep a card vertically and horizontally centered but not spill offscreen

Question

我有一个页面，其中只包含一张垂直和水平居中的卡片。该卡片包含一个表格和一些内部文本。用户将提交表单并返回一个列表。有时列表会很长，卡片会在顶部被截断，无法滚动。无论如何让它达到顶峰而不溢出？我试过使用 padding-top，但我不希望宽度影响百分比，而且固定值不适合不同的屏幕尺寸。

CSS

    html,
    body {
        height: 100%;
    }

    .container,
    .row.justify-content-center.align-items-center {
        height: 100%;
        min-height: 100%;
    }

完整示例:http://jsbin.com/madigarixu/edit?html,css,output

Answer 1

你应该试试这个

    html,
    body {
        height: 100%;
    }

    .container,
    .row.justify-content-center.align-items-center {
        height: 100%;
        min-height: 100%;
    }
  .justify-content-center {
    min-height:auto !important;
    height:auto !important;
  }

jsfiddle link update your code