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. Java查看项目目录以及导入项目

    1.查看项目目录 右击项目,选择properties,选择resource,查看location 2.导入已有项目 (1)右击项目 ,选择import (2)在弹出的窗口中选择Existing pro ...

  2. 计算误差函数的积分--erf(x)

    注意exp(-x^2-y^2) 可以拆成exp(-x^2) * exp(-y^2) 对 dx积分时,另外一个可以当常数提出到积分号外,另外 -b到b的积分看做常数提取到积分号外

  3. 百度api接口_知识积累

    app_id, app_key, app_secret app_id 是用来标记你的开发者账号的, 是你的用户id, 这个id 在数据库添加检索, 方便快速查找 app_key 和 app_secre ...

  4. B-论文一些好的句子

    Due to high design and test costs for real many-core chips, simulators which allow exploring the bes ...

  5. linux下的wireshark最新版安装(源码安装)以及一些常见问题

    源码安装教程 http://www.cnblogs.com/littleTing/p/3765589.html 1.下载wireshark: 网址:http://www.wireshark.org/d ...

  6. 第05章:MongoDB-CRUD操作--数据库

    ①显示现有的数据库 命令:show dbs 或者databases; ②显示当前的数据库 命令:db ③使用|创建数据库 命令:use 数据库名称   如果数据库不存在,则创建数据库,否则切换到指定数 ...

  7. BZOJ 2120 数颜色 (带修莫队)

    2120: 数颜色 Time Limit: 6 Sec  Memory Limit: 259 MBSubmit: 6367  Solved: 2537[Submit][Status][Discuss] ...

  8. DDR中寄存器的问题

    图中虚线是自动跳转,实线是通过发送命令才能跳转的. 下面是框中对应的命令. ACT = ACTIVATE MPR = Multipurpose register MRS = Mode register ...

  9. 何时使用Delegate或接口

    在以下情况下使用Delegates很有用: 调用一个单一方法: 一个类要进行方法规范(method specification)的多种执行: 使用一个静态方法来执行规范: 想获得类似事件设计的模式: ...

  10. 用Dagger2在Android中实现依赖注入

    依赖注入这个模式(模式已经用烂了,这里再烂一次)是用来给应用的各部分解耦的.使应用开发更加可扩展,更容易维护.通过本文你会学到如何使用Dagger2来处理依赖. 简介 如果以对象需要另外的一个对象才能 ...