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. [转]MySQL源码:Range和Ref优化的成本评估

    MySQL源码:Range和Ref优化的成本评估 原文链接:http://www.orczhou.com/index.php/2012/12/mysql-source-code-optimizer-r ...

  2. 安装postgis,使用postgis导入shapefile的步骤总结

    最近在做开源WebGIS方面的工作,要使用postgis导入shapefile数据.难点在安装过程和导入时命令行参数的使用,以下分别作个介绍,希望对大家有点用 一.安装postgis (1)首先到po ...

  3. 【Java】Java批量文件打包下载zip

    网上看了很多,本文使用ant.jar中的org.apache.tools.zip,页面用js表单提交 代码供参考: ACTION: /*      * 另存为      */     @Request ...

  4. Path类对路径字符串的操作

    在写程序时,不时会用到处理文件路径的问题,例如:取得扩展名.从路径中取出文件名.路径合并.取出或者去年扩展名等.这些功能都可以通过System.IO.Path类提供的方法来实现.这些相关功能用过多次了 ...

  5. 【repost】Javascript操作DOM常用API总结

    Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...

  6. spring-事件通知实现

    ok,今天不知道看啥来着,突然想起来spring内部的事件通知的实现,其实比较简单,简要记一下.然后又回顾了下eventbus的实现,其实俩者的实现方式大同小异吧,只是spring的很多操作都可以直接 ...

  7. protobuf和protostuff的区别

    在我们的开发过程中,序列化是经常需要处理的问题,比如在做分布式访问数据时,或者是在做redis缓存存储数据时,如果我们涉及的知识面不够广的话,可能会简单的使用JDK的序列化,也即在需要序列化的类上im ...

  8. CF每日一题系列 —— 415A

    http://codeforces.com/problemset/page/7?order=BY_SOLVED_DESC 从5000以内选的,emmm还是比较水的哈 时间还是有的,所以万事万物贵在坚持 ...

  9. python 引入本地module

    我们经常会遇到调用组内其他成员开发的python脚本的情况, 这时,需要借助如下代码: import sys sys.path.append('/./..') #/./.. 是需要引入的module的 ...

  10. POJ 2570 线段树

    Potted Flower Time Limit: 2000 MS Memory Limit: 65536 KB 64-bit integer IO format: %I64d , %I64u Jav ...