содержимое вертикального центра, которое превышает высоту окна

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>

Answer 2

Вы можете просто добавить max-height: 90% в номер .modal-box. 90% немного произвольны, но вы получите некоторое дополнение к модальному.