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%
);
}
|
效果如下(弹窗部分为灰色背景区域)：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
