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. hdu-2795(线段树的简单应用)

    题目链接:传送门 参考文章:https://blog.csdn.net/qiqi_skystar/article/details/50299743 题意:给出一个高h,宽w的方形画板,有高位1宽为wi ...

  2. vba中变量作用域

      参考:http://club.excelhome.net/thread-1237085-1-1.html 全局变量例子public 变量1 AS IntegerSub LLL()变量1 = 111 ...

  3. IntelliJ IDEA 2017版 spring-boot2.0.4+mybatis+Redis处理高并发,穿透问题

    一.当采用reddis缓存的时候,如果同时,一万次访问,那么就会有10000次访问数据库所以就会对数据库造成巨大压力,这时候,就要用到线程 1.方法体上加锁(优点,防护住了并发锁,缺点降低了内存效率) ...

  4. IntellJ IDEA 对于 Spring Boot2.0.2 配置文件application.properties 配置

    1.指定文件名称: 打开IDEA编辑位置: 找到如图位置: 点开后方设置 设置输入如下内容:(默认的配置文件名字可以使用--spring.config.name来指定,只需要指定文件的名字,文件扩展名 ...

  5. HDMI之(AVI)Auxiliary Video Information InfoFrame

    这是HDMI协议中关于AVI接口的信息     AVI InfoFrame在H14b中进行了定义.从HDMI 2.0 10.1 Use of the AVI InfoFrame in This Spe ...

  6. 关于latex的网站推荐

    有时候,你不知道某个数学符号的tex写法是什么,可以在下面这个网站手写该符号,然后会出现很多候选. http://detexify.kirelabs.org/classify.html 用latex处 ...

  7. 一份不太简短的LaTeX模板

    编译环境: Ubuntu16.04 texllive2016 sublime text3 + latextools 该模板使用与自己写文档,记笔记,记录代码,写作业等等. %!TEX program ...

  8. 有趣的HTML5 CSS3效果

    iphone6 外观:http://www.html5tricks.com/demo/css3-iphone6/index.html 天气图标:http://www.html5tricks.com/d ...

  9. sys/time.h 和 time.h

    今天在燕麦工作第二天.看荣哥给我的程序,发现程序里面用的延时跟我以前使用的不同.导入两个头文件,然后用函数来获得时间.关于这个函数特别查来一下. time.h  是ISO C99 标准日期头文件. s ...

  10. 配置SecureCRT密钥连接Linux

    SSH公钥加密的方式使得对方即使截取了帐号密码,在没有公钥私钥的情况下,依然无法远程ssh登录系统,这样就大大加强了远程登录的安全性. 1.        编辑配置文件 /etc/ssh/sshd_c ...