超过 window 高度的垂直居中内容

Question

我正在尝试使用 display: flex; 使框垂直居中，当框足够小时它可以工作，但是当框超过 window 高度时，部分内容将被切断。

工作示例：http://codepen.io/woutr_be/pen/bVQXLe

身高较大的示例：http://codepen.io/woutr_be/pen/KdrOZm

它似乎与 body: { height: 100%; } 有关，但当我删除它时，框不再居中：http://codepen.io/woutr_be/pen/MazNrE

当盒子的高度很大时，我不知道如何让它工作。

Answer 1

您只需将 max-height: 90% 添加到 .modal-box。 90% 有点随意，但会在模态周围给你一些填充。

Answer 2

这通常是我在需要垂直对齐元素时倾向于使用的方法。尝试更改高度和宽度，您会注意到它如何自动计算以使元素居中。

div.container{
    width: 300px;
    height: 300px;
    position: relative;
  
    background: salmon;
}

div.container > div.wrapper{
    position: absolute;
  
    top: 50%;
    left: 50%;
  
  
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  
    background: red;
}

<div class='container'>
    <div class='wrapper'>
      <label>Some text</label>
      <label>Some more text</label>
    </div>
</div>

超过 window 高度的垂直居中内容

vertically center content that exceeds window height

css

flexbox