方法一

<html>
    <head>
        <title>垂直居中</title>
        <style type="text/css">
         #floater    {height:50%; margin-bottom:-120px;}
         #content    {clear:both; height:240px; position:relative; border:1px solid red;}
         #div0{padding-bottom:35px; }
         #div1{position:absolute;bottom:0;height:35px; background-color:red;}
        </style>
    </head>
    <body>
        <div id="floater"></div>
        <div id="content">
                <div id="div0">aa</div>
                <div id="div1">bb</div>
        </div>
    </body>
</html>

方法二

<!doctype html>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<div style="position:absolute;top:50%;height:300px;margin-top:-150px;width:100%;background:silver;">
我是垂直居中的Div
</div>
</body>
</html>

<!doctype html>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>

<div style="position:fixed;top:50%;left:50%;height:300px;margin-top:-150px;width:200px;margin-left:-100px;background:silver;">
我总是居中的Div,窗口大小调整我也能居中,些方法的缺点是,要确定div本身的高度、宽度
</div>
</body>
</html>

div中图片居中

http://www.cnblogs.com/leejersey/p/3780415.html

Css实现Div在页面上垂直居中显示的更多相关文章

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

    一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就 ...

  2. CSS总结div中的内容垂直居中的五种方法

    一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...

  3. Vue页面上实时显示当前时间,每秒更新

    有时候我们需要在页面上添加一个类似时钟的东西来实时显示当前时间,这个时候我们可以利用定时器来完成这个功能 <div id="app"> {{date}} </di ...

  4. Jquery循环select标签,并给指定option添加select属性后在页面上不显示的问题

    <select id="testId"> <option value="">--请选择--</option> <opt ...

  5. Discuz常见小问题2-如何在新建的页面上只显示一部分板块

    切换到论坛-版块管理,记住要只显示的板块的gid(比如我的是36)   为某个主导航设置一个单独的php页面(名字自己取)   如果这个页面内容跟首页forum.php完全一样,只是第三行增加了一句话 ...

  6. CSS实现DIV超长截断,并显示...

    DIV显示内容有时会超长,并把页面撑的很难看, 以前的做法是在JS中,或者后台判断其长度,过长就截断, 但由于中英文数字展示的宽度并不一样,截断的长度也就只能取最小值, 展示的效果也不好.利用CSS提 ...

  7. 通过查询数据库中的数据匹配在页面上:(set单条数据属性是在页面上的显示与foreach的不同) 通过ID修改提取位置表信息

    ACTION   OpenModifyExtractPositionById // set单条数据属性 /* * 通过ID修改提取位置表信息 */ public String OpenModifyEx ...

  8. HTML/CSS:div水平与元素垂直居中(2)

    单个div水平居中:设置margin的左右边距为自动 div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中 ...

  9. 【CSS】非常简单的css实现div悬浮页面底部

    <div id="demo_div"></div> <style> #demo_div{ left:; position: fixed; bot ...

随机推荐

  1. vue static和assets的区别

    static和assets的区别,原理就在于webpack是如何处理静态资源的 assets 1)在vue组件中,所有模板和css都会被vue-html-loader和css-loader解析,并查找 ...

  2. phpass类加密算法

    客户说用md5加密容易被破解,要求使用bcrypt加密,经搜索发现password_hash函数可以轻松对密码实现加盐加密,比md5更安全,缺点是运行慢. phpass是一个开源类库,它可以让我们更方 ...

  3. 【索引】位图BitMap索引

    位图(BitMap)索引 前段时间听同事分享,偶尔讲起Oracle数据库的位图索引,顿时大感兴趣.说来惭愧,在这之前对位图索引一无所知,因此趁此机会写篇博文介绍下位图索引. 1. 案例 有张表名为ta ...

  4. sql delete语句

    如果要删除数据库表中的记录,我们可以使用DELETE语句. DELETE语句的基本语法是: DELETE FROM <表名> WHERE ...; 例如,我们想删除students表中id ...

  5. java——String类,时间类,格式化

    日期类 格式化

  6. Delphi Base64编码_解码及ZLib压缩_解压(转)

    最近在写的程序与SOAP相关,所以用到了一些Base64编码/解码及数据压缩/解压方面的知识. 在这里来作一些总结:一.Base64编码/解码 一般用到的是Delphi自带的单元EncdDecd,当然 ...

  7. web服务nginx和php的相互关系

    nginx和php有什么关系?很多新手可能有这个疑问,我之前学php也没注意这些问题,只管着按文档配置操作,完成php项目就不管了,最近特意总结了一下. php是一门编程语言,讲究说学逗唱...呃,不 ...

  8. 如何查看bug属于前端还是后端

    1.F12下如何查看bug属于前端还是后端?前后端分离的项目,通过ajax向后端请求数据,如果后端返回的数据有问题,那么问题就是候选,如果返回的数据没有问题,但是展示结果异常那么问题一般就出在前端. ...

  9. 教你一些IDE中比较骚的操作技巧!

    本文转自微信公众号「程序员的成长之路」id:cxydczzl IDEA 有个很牛逼的功能,那就是后缀补全(不是自动补全),很多人竟然不知道这个操作,还在手动敲代码. 这个功能可以使用代码补全来模板式地 ...

  10. Collection Lists

    ArrayList LinkedList  Vector 顺序添加 抽象数据类型(ADT)是一个实现包括储存数据元素的存储结构以及实现基本操作的算法. ArrayList  (1)ArrayList是 ...