css - 垂直居中超过窗口高度的内容

Question

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

工作示例: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

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

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>