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- ...
随机推荐
- 证明2x2正交矩阵专置后还是正交矩阵
[ x1 x2 y1 y2] x1^2+y1^2=1 x2^2 + y2^2=1 x1*x2 + y1*y2=0 如果专置后还是 x1^2 + x2^2=1 y1^2 +y2^2=1 x1* ...
- git只合并某一个分支的某个commit
第一种情况:只合并一个commit git checkout develop-hbb git cherry-pick 7c32be61 以上,7c32be61是develop上的一个fix bug的c ...
- Docker学习以及镜像制作流程
一.何为Docker Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后 ...
- 如何在CentOS7上安装Python3及对应问题
首先一般来说安装好的CentOS是会自带python2.7,但是是没有安装python3的环境的 [root@host bin]# pwd /usr/bin [root@host bin]# ls p ...
- AngularJS中$interval和$timeout的使用
我们在项目中会出现定时刷新,延迟加载等多种场景. 接下来就看$interval和$timeout的使用 $interval可用于定时任务,我们只需在controller注入$interval即可使用. ...
- Arcgis Server Manager发布ArcGISTiledMapServiceLayer服务
用ArcgisServer manager发布一个ArcGISDynamicMapServiceLayer服务: Add New Service->填写name,type 选择Map servi ...
- C#-VS发布网站-准备待发布网站-摘
通过使用“发布网站”工具部署网站项目 准备网站源文件 在vs生成发布文件 配置IIS .NET Framework 4 其他版本 Visual Studio 2008 Visual Studio ...
- 20169207《Linux内核原理及分析》第十二周作业
本周选做的信息安全实验为Python实现Zip文件的暴力破解 实验预备: 这次实验我们需要用到的库为zipfile.下来我们先来了解一下这个模块. 首先我们的重点是对zip文件的操作,而zipfile ...
- CentOS 5 上配置 Redmine 和 Git
现在我们用 Trac + Git 来管理所有的项目,早些时候是由 Trac + Subversion 管理的,和 Git 比较起来 Subversion 简直就是龟速.虽然我们前段时间换成了 Git ...
- 《如何阅读it技术书》课堂笔记——51cto
对一些书的看法: “21天精通JAVA之类”的书,好好理解精通二字,哪里有这么快就能学的会. 吐槽新人: Oop理论,别写出来的都是面向过程式. 桌面乱七八糟. 对新人分享一些经验: 阅读时自我提神的 ...