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- ...
随机推荐
- 解决css3不支持同时缩放和旋转的办法
设置两个div,外层scale,内层rotate.
- Java,数据库中的数据导入到Excel
private static void executeMethod(JobExecutionContext arg0) throws Exception{ try { TContrastService ...
- POJ 2433 Landscaping (贪心)
题意:给定一个序列表示一群山,要你保留最多 K 个山峰,最少要削去多少体积和土.一个山峰是指一段连续的相等的区间,并且左边和右边只能比这个区间低,或者是边界. 析:贪心,每次都寻找体积最小的山峰,然后 ...
- HDU 5663 Hillan and the girl (莫比乌斯反演 + 分块)
题意:给定n,m,求,其中F(x)=0,,如果x是完全平方数,否则是1. 析: 由于按照题意的F,不好筛选,所以我们反过来,F(x),x是平方数,就是1,否则是0. 这个是可以预处理出来的,可以用筛选 ...
- PI3HDX1204B
PI3HDX1204B用于HDMI2.0 6Gpbs的中继器,它有可编程的高均衡,输出摆幅和去加重控制模式.当传输为6Gpbs时,最大的EQ是22dB. PI3HDX1240B的EQ,SW和去加重可以 ...
- VirtualBox安装增强工具时:Unable to install guest additions: unknown filesystem type 'iso9660'
解决方法: sudo apt-get install --reinstall linux-image-$(uname -r) 参考:http://askubuntu.com/questions/596 ...
- Arcgis Server Manager发布ArcGISTiledMapServiceLayer服务
用ArcgisServer manager发布一个ArcGISDynamicMapServiceLayer服务: Add New Service->填写name,type 选择Map servi ...
- Silverlight中图片显示
silverlight中显示一个图片有很多的中方法,xaml中的image控件或者自定编写程序来生成image控件. silverlight中显示的图片只能是Bitmap, JPG, PNG(64位颜 ...
- currentTarget
定义和用法 currentTarget 事件属性返回其监听器触发事件的节点,即当前处理该事件的元素.文档或窗口. 在捕获和起泡阶段,该属性是非常有用的,因为在这两个节点,它不同于 target 属性. ...
- pyquery 安装
取得网页源代码,导入pyquery库 pip3 install pyquery 如果报错的话:python安装pyquery报错error: 'libxml/xmlversion.h' f ...