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

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

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

时间: 2024-10-13 16:28:11

HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中的相关文章

css中百分比的不同参数

乘以包含块的宽度 margin, padding, left, right, text-indent, width, max-width, min-width 乘以包含块的高度 top, bottom, height, max-height, min-height 关于包含块(containing block)的概念,不能简单地理解成是父元素.如果是静态定位和相对定位,包含块一般就是其父元素.但是对于绝对定位的元素,包含块应该是离它最近的 position 为 absolute.relative

javascript和css实现垂直方向自适应的三角提示菜单

这是一个比较简单实用的菜单,最重要的是他不需要引用jQuery库.菜单在垂直方向上能做到自适应,当主菜单靠近顶部,子菜单将会在下面,当主菜单靠近底部,子菜单在上面.运用Modernizr的触摸检测功能,我们可以让子菜单的响应在pc上是hover,而在触摸设备上是点击.例子中还示范了如何在宽度比较窄的情况下如何调整布局.分享一个最好用的UI前端框架! html代码: .代码 <ul id="cbp-tm-menu" class="cbp-tm-menu">

[19/06/07-星期五] CSS基础_布局&amp;定位

一.固定布局(不适应设备的浏览器的变化) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简单布局</title> <style type="text/css"> /*清除默认样式*/ *{ margin: 0; padding: 0; } .header{ width: 1000px; height: 100p

移动端网页实现(用百分比进行定位)

HTML代码: <div class="wrap"> <div id="bg"> <div id="title"> <a href="#" class="return">返回</a> </div> <a href="#" class="ios">ios下载</a> <

豆瓣移动端风格的css命名方法与学习

在CSS取名相对于刚入门来说是最头疼的事情,往往取一个可读性的名字相对以后的代码风格还是很重要的. 在配合团队方面一个好的类名可以帮助同事来理解,增加团队之间的效率有着很大的意义. 豆瓣的前段相对其他网站来说还是比较文艺清爽的,所以很值得去向他们团队学习,学习的地方很多,先来取名把. 在最外面的一个<div class="ck-root">.....</div>首先内容先用一个大的div盒子包起来, <div class="ck-root&quo

【CSS】创建布局

随着对分离HTML元素的语义重要性与其表现的影响的不断强调,CSS在HTML5元素布局方面的作用越来越重要. 1. 定位内容 控制内容最简单的方式就是通过定位,这允许你使用浏览器改变元素的布局方式. 1.1 设置定位类型 position 属性设置了元素的定位方法. position 属性的不同值指定了元素定位所针对的不同元素.使用 top.bottom.left 和 right 属性设置元素的偏移量的时候,指的是相对与 position 属性指定的元素的偏移量. <!DOCTYPE html>

CSS多列布局实现方法介绍

在css教程(http://www.maiziedu.com/course/web/421-5342/)中,使用css实现多列图片等宽等间距布局是很常用的,在进行web前端项目开发时会经常在网页中用到,下面就以三列图片等宽等间距为例讲解实现方法. 每个图片块左浮动,宽30%,左外边距2.5%:  100%=(2.5%+30%)+(2.5%+30%)+(2.5%+30%)+2.5%  <!DOCTYPE html>  <html>  <head>  <meta ch

PHP.4-DIV+CSS标准网页布局准备工作(下)

DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百分比值参考上级元素的宽度,允许使用负值边际.如果四个值都给出了,它们分别被应用于上.右.下和左边界.如果只给出一个值,它被应用于所有边界.如果两个或三个值给出了,省略了的值与对边相等.注意如果边界在垂直方向邻接(重叠)了,会改用其中最大的那个边界值.而水平方向则不会.也可以选择使用上边界margin

css实现左右布局

css实现左右布局显示是前端进行页面设计的基础,也是全面了解并学习css一个很好的切入点,因为其中会涉及到对许多css基础点的认知.实现css入门,理解左右布局的实现方式是必经之路,同时也能使我们在项目中涉及前端编码的部分受益. 下面我们就介绍自己总结的7种css实现前端左右布局的方式,如还有其他方式,请告诉我. 1. table---table的li实现 实现原理: table标签是能够具有实现左右布局的属性,也是我们项目中使用最多的.table布局也是页面布局中使用的最早的布局方式,随着前端