HTML-移動端如何使用css讓百分比布局的彈窗水平和垂直方向上置中

標籤：

pc端讓一個彈窗水平和垂直方向置中，在知道彈窗寬高的情況下很好計算，只需要用如下css即可：

#date{    width: 300px;    height: 300px;    position: absolute;    top: 50%;    left: 50%;    margin-left: -150px;    margin-top: -150px;}

但是到了移動端，如果寫百分比布局的話，高度不好確定，所以彈窗置中就會變得困難，今天遇到這個問題，百度了一下，看到這位朋友的資料，（http://www.shejidaren.com/centering-percentage-widhtheight-layout.html），這位朋友的css代碼如下：

.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代碼如下：

.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讓百分比布局的彈窗水平和垂直方向上置中