居中模态窗口

Question

我希望将这个日期选择器集中在一起，以便在移动设备上使用，但我无法让它工作。我目前正在尝试这种方法：https://css-tricks.com/centering-percentage-widthheight-elements/

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

......但没有运气。水平中心，但不正确，模态与窗口大小成比例。它在纵向上根本不是中心。

我也尝试过使用jQuery，但我也无法正常工作。

小提琴：http://jsfiddle.net/qos2v29e/

Answer 1

我使用灵活的盒子模型（flexbox）解决了类似的问题。创建一个与屏幕大小相同的Flex容器，然后使您的模态成为Flex容器的子项。 Flexbox允许垂直和水平居中。

这里有关于flexbox的精彩介绍： http://flexboxin5.com/