首頁 > web前端 > html教學 > HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中_html/css_WEB-ITnose

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

WBOY
發布: 2016-06-24 11:40:22
原創
1236 人瀏覽過

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%);}
登入後複製

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

这样就可以很好的得到自己想要的,水平和垂直方向上都居中的弹窗效果拉,大家可以试下,还有,感谢这位朋友,解决了我的困扰~~

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板