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- ...
随机推荐
- 关于拼接SQL语句sqlMap的使用方法
1.为什么使用? 主要还是为了代码中获取到值,然后带入SQL语句中拼接查询 2.怎么使用? 1)bean继承了BaseEntity类,该类中有 /** * 自定义SQL(SQL标识,SQL内容) */ ...
- sqlserver2008查询性能优化(文摘)
第1章 sql查询性能调整 第4章 索引分析
- IntelliJ IDEA 2017版 spring-boot 2.0.3 部署war包项目和jar包项目
1.建立项目 Java Controller package com.springboot.jsp.controller; import org.springframework.stereotype. ...
- SVN previous operation has not finished
svn提交遇到恶心的问题,可能是因为上次cleanup中断后,进入死循环了. 错误如下: 解决方法:清空svn的队列 1.下载sqlite3.exe 2.找到你项目的.svn文件,查看是否存在wc.d ...
- 安卓TP驱动开发
转自 blog.csdn.net/dddxxxx/article/details/54312415
- 微信小程序之弹框modal
官方文档 <modal hidden="{{hidden}}" title="这里是title" confirm-text="自定义确定按钮&q ...
- js点击空白处触发事件
我们经常会出现点击空白处关闭弹出框或触发事件 <div class="aa" style="width: 200px;height: 200px;backgroun ...
- Java理论学时第三节。课后作业。
如果一个类中既有初始化块,又有构造方法,同时还设定了字段的初始值,谁说了算? 运行结果. 根据我的总结,它们三个的优先级是:构造方法 > 字段初始值 > 初始化块. 当多个类之间有继承关系 ...
- Linq动态查询与模糊查询 ---转
Linq动态查询与模糊查询(带源码示例) 继LINQ动态组合查询PredicateExtensions讲解 ----- 在用上面的方法时遇到了些问题 解决 LINQ to Entities 不支持 L ...
- POJ2536 Gopher II(二分图最大匹配)
Gopher II Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 9005 Accepted: 3724 Descrip ...