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. 本地导入/导出远程oracle数据库

    1.导出数据库 exp 用户名/密码@远程服务器IP:数据端口号/实例名 file=存储dmp文件的路径 full=y; 2.导入数据库 imp 用户名/密码@远程服务器IP:数据库端口号/实例名 f ...

  2. 2-具体学习Github---init add commit log diff

    1.安装: 首先找到git的官网,内部有下载链接. 也可以用下面的,我的是win7的64位系统: 可以在此处下载:Git-2.13.0-64-bit.exe链接:http://pan.baidu.co ...

  3. Mybatis-Plus 实战完整学习笔记(十)------条件构造器核心用法大全(下)

    31.升序orderByAsc 31.升序orderByAsc List<Employee> employeeList = employeeMapper.selectList(new Qu ...

  4. 第22章:MongoDB-聚合操作--聚合管道--$out

    ①$out $out:利用此操作可以将查询结果输出到指定的集合里面. ②范例:将投影的结果输出到集合里

  5. 如何使用git管理代码

    如何使用Git管理代码 Git 是开发人员用来向代码库(msstash)中提交代码或者下载远端代码库中代码的工具. 如何使用git向代码库中提交我们修改后的代码呢? 1.如果是第一次使用git,那么需 ...

  6. C++编译器详解(二)常见precompiling 指令介绍

    VC++编译器中一些常见precompiling 指令介绍 我们在利用vc6.0 project wizard生成的代码中,经常看到大量的precompiling指令.本文讲解了常见的这些指令的作用 ...

  7. C#-ado.net学习笔记-会有更新

    ado.net 通用类对象.在本地内存暂存数据 托管类对象.让本地通用类对象连接数据库,让本地通用类对象和数据库同步 连接数据库 new connection(connectstring) comma ...

  8. hdu 4937 base进制只含3456的base数

    http://acm.hdu.edu.cn/showproblem.php?pid=4937 给定一个数n,若这个数在base进制下全由3,4,5,6组成的话,则称base为n的幸运进制,给定n,求有 ...

  9. hdu 1.3.1 FatMouse' Trade

    贪心的运用,主要看其比值,取最大值实现贪心... #include<cstdio> #include<algorithm> #include<vector> usi ...

  10. 分形之希尔伯特-皮亚诺(Hilbert-Peano)曲线

    1890年,意大利数学家皮亚诺(Peano G)发明能填满一个正方形的曲线,叫做皮亚诺曲线.后来,由希尔伯特作出了这条曲线,又名希尔伯特曲线.Hilbert-Peano曲线是一种分形图形,它可以画得无 ...