HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中

pc端让一个弹窗水平和垂直方向居中，在知道弹窗宽高的情况下很好计算，只需要用如下css即可：

1
2
3
4
5
6
7
8
9
#date{   
    width: 300px;  
    height: 300px;
    position: absolute;   
    top: 50%;   
    left: 50%;   
    margin-left: -150px;   
    margin-top: -150px;
}

但是到了移动端，如果写百分比布局的话，高度不好确定，所以弹窗居中就会变得困难

1
2
3
4
5
6
7
8
9
10
11
.center{   
    width:50%;   
    height:30%;   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    -moz-transform: translate(-50%, -50%);  
    -ms-transform: translate(-50%, -50%);   
    -webkit-transform: translate(-50%, -50%);   
    transform: translate(-50%, -50%);
}

试了一下，可以得到想要的效果，

但是如果我们在不确定高度的情况下，把height：30%去掉，不设置height的值，会发现弹窗会根据自己的内容来实现垂直方向居中，主要css代码如下：

1
2
3
4
5
6
7
8
9
10
.center{   
    width:50%;   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    -moz-transform: translate(-50%, -50%);  
    -ms-transform: translate(-50%, -50%);   
    -webkit-transform: translate(-50%, -50%);   
    transform: translate(-50%, -50%);
}

效果如下(弹窗部分为灰色背景区域)：

posted @ 2015-07-30 15:49  踱步的羊驼君  阅读(508)  评论(0)  编辑  收藏  举报