div在页面垂直居中方法---增强改进版
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在页面垂直居中方法---增强改进版的更多相关文章
- div盒子水平垂直居中方法
文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...
- 小div在大div中垂直居中,以及div在页面垂直居中
<html> <head> <title>淘宝 2faner</title> <style type="text/css"&g ...
- 利用css来让一个div在页面中垂直居中的方法
一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就 ...
- 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- ...
- CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法
一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...
- CSS3与页面布局学习笔记(三)——BFC、定位、浮动、7种垂直居中方法
一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...
- 让DIV水平和垂直居中的几种方法
我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...
- div水平居中与垂直居中的方法【摘自美浩工作室官方博客 】
大家往往在写页面中会遇到不固定宽和高的div如果水平和垂直都居中呢?在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示.如果div有固定宽度 ...
- (转载)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- ...
随机推荐
- 树状数组(hdu-4325,hdu-1166,pat-1057)
1.hdu-4325 题意:插花,要么给出插花的范围,要么查询某个点的花的个数. 思路:通过更新,每次更新区间S到T的数值,表插入花(这一点一开始没想到), 要么查询某个点的花的数目. (与以往单纯的 ...
- centos7 新增ip
1.进入network-scripts目录:cd /etc/sysconfig/network-scripts/ 2.复制ifcfg-eth0: cp ifcfg-eth0 ifcfg-eth0:0 ...
- centos7 配置ip
1. 切换到root用户下: su root 2.进入network-scripts目录: cd /etc/sysconfig/network-scripts/ 3.该目录下一般第一个文件是主文件,我 ...
- openstack之flavor管理
概览 [root@cc07 ~]# nova help | grep flavor flavor-access-add Add flavor access for the given tenant. ...
- exec函数
概念 当进程调用一种exec函数时,该进程执行的程序完全替换为新程序,新程序从main函数开始执行.调用exec并不创建新进程,所以前后的进程ID并未改变.exec只是用磁盘上的一个新程序替换了当前进 ...
- HDU 5321 Beautiful Set (莫比乌斯反演 + 逆元 + 组合数学)
题意:给定一个 n 个数的集合,然后让你求两个值, 1.是将这个集合的数进行全排列后的每个区间的gcd之和. 2.是求这个集合的所有的子集的gcd乘以子集大小的和. 析:对于先求出len,len[i] ...
- oracle 操作,偶尔记一下
一.根据更新时间排序 1.插入insert into t_user t (t.user_id,t.user_name,t.create_time,t.update_time)values('10',' ...
- LoadRunner改脚本
加action,不支持嵌套大括号 Action(){int iCt = 0; iCt = lr_output_message("abcdefg"); iCt = funA(3,5) ...
- checked 选择框选中
移除属性,两种方式都可 $browsers.removeAttr("checked"); $browsers.attr("checked",false); // ...
- Java-动态代理技术
1.程序中的代理 为具有相同接口的目标类的各个方法,添加一些系统功能,如日志,异常处理,计算方法运行的 时间,事务管理等等,都可以交给另一个类去实现这些功能,该类称为代理类. 注意:为了让代理类共享目 ...