div在页面垂直居中方法---改进版

.wrap{
background: #ffffff;
position:absolute;
margin:auto;
top:;
bottom:;
left:;
right:;
height: 630px;
}

效果图:

在开发中遇到个问题,

当屏幕height小于630px时,会出现如下图,顶部的logo,通过滚动滚动条,也看不到。

解决办法:使用媒体查询

.wrap{
background: #ffffff;
position:absolute;
margin:auto;
top:;
/*bottom: 0;*/
left:;
right:;
height: 630px;
}
@media screen and (min-height: 630px) {
.wrap {
bottom:;
}
}

当高度小于630px时,去掉bottom:0;直接设置top:0;

效果图,如下:

div在页面垂直居中方法---增强改进版的更多相关文章

  1. div盒子水平垂直居中方法

    文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...

  2. 小div在大div中垂直居中,以及div在页面垂直居中

    <html> <head> <title>淘宝 2faner</title> <style type="text/css"&g ...

  3. 利用css来让一个div在页面中垂直居中的方法

    一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就 ...

  4. CSS3与页面布局学习总结(四)——页面布局大全BFC、定位、浮动、7种垂直居中方法

    目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

  5. CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

  6. CSS3与页面布局学习笔记(三)——BFC、定位、浮动、7种垂直居中方法

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

  7. 让DIV水平和垂直居中的几种方法

    我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...

  8. div水平居中与垂直居中的方法【摘自美浩工作室官方博客 】

    大家往往在写页面中会遇到不固定宽和高的div如果水平和垂直都居中呢?在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示.如果div有固定宽度 ...

  9. (转载)CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法

    目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

随机推荐

  1. mac os 下 Android Studio设置真机调试

    http://www.cnblogs.com/developer-wang/p/6719555.html 如果没有 .bash_profile 只需要创建 .bash_profile,然后增加andr ...

  2. TCP/IP协议(3):数据链路层

    OSI数据链路层上的协议有Ethernet/IEEE802.3/IEEE802.4/IEEE802.5. ARP.RARP等. 1.Ethernet(以太网) 链路层支持很多协议,比如Ethernet ...

  3. Mybatis-Plus 实战完整学习笔记(十一)------条件构造器删除,修改,conditon

    1.修改功能--其他过滤方式跟select一样 /** * 修改条件构造器 * @throws SQLException */ @Test public void selectUpdate() thr ...

  4. 微信小程序的新的

    app.request.get('http://ele.kassing.cn/v1/pois',this.data.city).then(res=>{ console.log(res) this ...

  5. mysql学习之路_字段类型与属性2

    字段属性: 主键,唯一键,自增长. 主键: Primary key 主要的键,一张表只能有一个字段能使用对应的键,用来唯一约束该字段里面的数据不能重复,称之为主见. 一张表最多只有一个主键. 增加主键 ...

  6. 第03章:MongoDB启动参数说明

    ①基本配置 --quiet # 安静输出 --port arg # 指定服务端口号,默认端口27017 --bind_ip arg # 绑定服务IP,若绑定127.0.0.1,则只能本机访问,不指定默 ...

  7. Typecho 插件开发基础

    <?php /** * 标题 插件说明 * * @package 添加标题 * @author Fan * @version 1.0.0 * @link http://cnblogs.com/f ...

  8. javascript 经典问题汇总

    1. ["1","2","3"].map(parseInt) 为多少?答:[1,NaN,NaN]array.map(function(cur ...

  9. Edifact 95B报文解读

    PART 1 INTRODUCTION D100_D.95B PART 2 UNIFORM RULES OF CONDUCT FOR INTERCHANGE PART2_D.ZIP(1) OF TRA ...

  10. font-style字体设置

    用到一些字体找起来很麻烦,扒了一些 未测试 HTML,CSS,font-family:中文字体的英文名称 宋体 SimSun黑体 SimHei微软雅黑 Microsoft YaHei微软正黑体 Mic ...