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;
}

  但是到了移动端,如果写百分比布局的话,高度不好确定,所以弹窗居中就会变得困难,今天遇到这个问题,百度了一下,看到这位朋友的资料,这位朋友的css代码如下:

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%);
}

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

0

  这样就可以很好的得到自己想要的,水平和垂直方向上都居中的弹窗效果拉,大家可以试下~