方法一

<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. (微服务架构)Security + Oauth2 + Jwt + Zuul解决微服务系统的安全问题

    前言 之前零零散散的学习过一点鉴权这方面的玩意儿,但自我感觉净他妈整些没用的,看代码还是看不懂,这次我们再统一对其进行学习一下,希望自己掌握这个技能,也希望屏幕面前的你能有点收获 此次的学习周期可能有 ...

  2. git ，报403错误，完美解决方案

    首先命令行操作结果如下: root@zhiren-PowerEdge-T110-II:/zrun# git clone https://git.coding.net/xxxxxxxx/xxxx.git ...

  3. django 工具类配置

    好久没发新博客,凑个数... django-debug-toolbar 介绍 django-debug-toolbar 是一组可配置的面板,可显示有关当前请求/响应的各种调试信息,并在单击时显示有关面 ...

  4. PHP ftp_nb_get() 函数

    定义和用法 ftp_nb_get() 函数从 FTP 服务器上下载一个文件并保存到本地一个文件中.(无阻塞) 该函数返回下列值之一: FTP_FAILED(发送/获取失败) FTP_FINISHED( ...

  5. RRT路径规划算法（matlab实现）

    基于快速扩展随机树(RRT / rapidly exploring random tree)的路径规划算法,通过对状态空间中的采样点进行碰撞检测,避免了对空间的建模,能够有效地解决高维空间和复杂约束的 ...

  6. 吉首大学校赛 I 滑稽树上滑稽果 （Lucas + 莫队）

    链接:https://ac.nowcoder.com/acm/contest/925/I来源:牛客网 题目描述 n个不同的滑稽果中,每个滑稽果可取可不取,从所有方案数中选取一种,求选取的方案中滑稽果个 ...

  7. 【系统安全性】四、认证Authentication

    四.认证Authentication 1.为什么要认证 对请求.数据进行认证,判断伪造的数据 HTTP请求很脆弱,抓包软件很强大,容易伪造身份,非法获取数据 2.摘要认证 对象:客户端参数.服务端响应 ...

  8. 3、第一个Appium测试

    运行脚本前环境准备: 1.IDE,推荐使用IJ 2.安装jdk环境,推荐>1.8 3.准备一台真机或者模拟器 4.SDK 5.maven环境 项目目录: CalculatorTest.java文 ...

  9. Yslow压力测试

    1.yslow介绍 概述:YSlow是Yahoo发布的一款插件,可安装在Firefox或Chrome上,这个插件可以分析网站的页面,并告诉你为了提高网站性能,如何基于某些规则而进行优化. 2.安装方法 ...

  10. PAT_A1101#Quick Sort

    Source: PAT A1101 Quick Sort (25 分) Description: There is a classical process named partition in the ...