标签：
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%);} |
效果如下(弹窗部分为灰色背景区域)：
HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中
标签：
原文地址：http://www.cnblogs.com/ding1006/p/4689584.html
