Question

我试图使用jquery mobile和CSS3（没有javascript计算）在屏幕上居中一个固定高度和宽度（750x360）的对话框。这将在IPad移动safari上运行，到目前为止，我还没有找到适用于该浏览器的calc（）版本。

我目前正在使用javascript计算margin-top。参数是窗口的可变高度和对话框的固定高度。但是我需要从我的实现中删除它以满足标准，并且只在可能的情况下使用CSS / jquery方法。

有办法做到这一点吗？

我正在导入jquery UI和jquery移动库，因此我可以访问他们所有的方法。

Answer 1

以下是如何垂直和水平居中div的示例：

#center {
   background-color: red;
   width: 100px;
   height: 100px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -50px; /* half the height */
   margin-left: -50px; /* half the width */        
}

jsfiddle

上的示例

要以这种方式定位您使用position:absolute的元素，您可以指定元素的位置，而不必担心其他元素。要将元素居中，我们希望将其放在容器大小50%上。但如果我们停在那里，左上角的元素将居中。因此，我们必须添加margin。

希望这可以帮助你朝着正确的方向前进。

在可变窗口大小的屏幕上居中固定高度/宽度对话框

1 个答案: