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

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

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

垂直居中的内容超出窗口高度

2 个答案: