div在页面垂直居中方法---增强改进版

div在页面垂直居中方法---改进版

.wrap{
    background: #ffffff;
    position:absolute;
    margin:auto;
    top: 0;
    bottom: 0;
    left:0;
    right: 0;
    height: 630px;
}

效果图:

在开发中遇到个问题,

当屏幕height小于630px时,会出现如下图,顶部的logo,通过滚动滚动条,也看不到。

解决办法:使用媒体查询

.wrap{
    background: #ffffff;
    position:absolute;
    margin:auto;
    top: 0;
    /*bottom: 0;*/
    left:0;
    right: 0;
    height: 630px;
}
@media screen and (min-height: 630px) {
    .wrap {
        bottom: 0;
    }
}

当高度小于630px时,去掉bottom:0;直接设置top:0;

效果图,如下:

时间: 2024-10-10 09:07:54

div在页面垂直居中方法---增强改进版的相关文章

小div在大div中垂直居中,以及div在页面垂直居中

<html> <head> <title>淘宝 2faner</title> <style type="text/css"> .big{ width: 800px; height: 500px; background: #333; position:absolute;left: 50%; top: 50%; margin-left:-400px;  margin-top: -250px; } .small{ width: 40

利用css来让一个div在页面中垂直居中的方法

一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就是该DIV宽度和高度的一半. width:300px; height:200px; position:absolute; left:50% top:50%; margin:-100px 0 0 -150px ; 2.使用jquery代码  $(window).resize(function(){ $

让DIV水平和垂直居中的几种方法

我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQuery两种方法让DIV水平和垂直居中. CSS让DIV水平居中 说明,本文中所指的DIV包括HTML页面中所有的元素. 让一个DIV水平居中,直接用CSS就可以做到.只要设置了DIV的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中. 1 .mydiv{ 2 m

CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法

一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格式化上下文.常规流(也称标准流.普通流)是一个文档在被显示时最常见的布局形态.一个框在常规流中必须属于一个格式化上下文,你可以把BFC想象成一个大箱子,箱子外边的元素将不与箱子内的元素产生作用. BFC是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系

div水平居中与垂直居中的方法【摘自美浩工作室官方博客 】

大家往往在写页面中会遇到不固定宽和高的div如果水平和垂直都居中呢?在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示.如果div有固定宽度的话,用padding,margin都很容易实现.方法有很多种.不过经常遇到这种div没有固定的宽度高度的情况,我们就不能用margin,padding设置固定的距离了.这个问题让很多人头疼.而怎么样才能让这个div居中显示呢?其实这种情况解决的办法也是有很多种,js,css都可以实现. 1.先来看

div盒子水平垂直居中的方法推荐

父盒子是position:relative 方法一:(宽高确定) div绝对定位水平垂直居中[margin 负间距], 方法二: (宽高确定) div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 方法三:(宽高不定) div绝对定位水平垂直居中[Transforms 变形] 兼容性:IE8不支持: 方法四:(宽高不定) flex布局(对父元素display:flex) 方法五: 父盒子display: table-cell和子盒子dis

《转》CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳)

转自大地Dudy的CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳) 本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE系列只测试了IE9和IE6,以下所说的IE的支持性只是相对于IE9和IE6来说的: 一.元素的水平垂直居中: 第一种方法: <!doctype html> <html lang="en&

CSS垂直居中方法

Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的<td>.<th>.<caption>等,而像<div>.<span>这样的元素是没有valign特性的,因此使用vertical-align对它们不起作用. 一.单行垂直居中 如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和

div垂直居中 css div盒子上下垂直居中

div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div css让这个登录布局水平和css垂直居中. 这里介绍一种最简单兼容性最好的水平居中与上下垂直居中的方法. 1.具体实例代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &