Центрирование модального окна

Question

Я хочу сосредоточить этот выбор даты, чтобы было проще использовать его на мобильных устройствах, но у меня возникли проблемы с его работой. Я в настоящее время пытается этот метод: https://css-tricks.com/centering-percentage-widthheight-elements/

.picker { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    width: 40%; 
} 

... но не повезло. Горизонтально он центрирует, но не правильно, а модальные шкалы с размером окна. Вертикально это не сосредотачивается вообще.

Я также пробовал центрировать его с помощью jQuery, но я не мог заставить это нормально работать.

Fiddle: http://jsfiddle.net/qos2v29e/

Answer 1

я решил аналогичную проблему с использованием модели гибкой коробки (Flexbox). Создайте гибкий контейнер размером вашего экрана, а затем сделайте свой модальный дочерний элемент контейнера flex. Flexbox обеспечивает вертикальное и горизонтальное центрирование.

Великий интро Flexbox здесь: http://flexboxin5.com/