1. 本实例以新文档开始

  2. 2

    先放置一个div，并且设置class名为aa，赋予它css属性：

    width:0;height:0;position:fixed;left:50%;rigth:50%;top:50%;bottom:50%;

  3. 3

    在.aa中放置一个div，并且设置class名为aaa，赋予它必要的css属性：

    width:600px;height:220px;margin-left:-300px;margin-top:-110px

    （这里的各个属性根据需要自己设定；总之margin-left要为width一半的负值；margin-top要为height一半的负值）

    这个div就是你要放内容的层

  4. 4

    接下来要加上内容，要做到如下效果

  5. 5

    继续设置.aaa的css属性：

    color:#fff;font-size:40px;font-family:"Comic Sans MS", cursive;text-align:center;line-height:220px

    （要让文字垂直居中只要设置line-height值为：这个层的height减去padding除以文字的行数所得数值）

    保存后，预览就完成了

如何让DIV在窗口水平和垂直居中的更多相关文章

  1. div自动适应浏览器窗口水平和垂直居中

    html <body> <div id="centerDiv">自动适应水平和垂直居中</div> </body> css ;;} ...

  2. div中文字水平和垂直居中的css代码

    HTML元素 <div>水平垂直居中</div> css样式 div{ width:200px;height:200px; /*设置div的大小*/ border:1px so ...

  3. DIV里面的图片水平与垂直居中的方法

    <div class=“box”> <img /> </div> 1.水平居中: 1)box设置  text-align:center ;    text-alig ...

  4. DIV或者DIV里面的图片水平与垂直居中的方法

    <div class=“box”> <img /> </div> 水平居中的常用方式: text-align:center ——这可以实现子元素字体,图片的水平居中 ...

  5. 基于jQuery实现的水平和垂直居中的div窗口

    在建立网页布局的时候,我们经常会面临一个问题,就是让一个div实现水平和垂直居中,虽然好几种方式实现,但是今天介绍时我最喜欢的方法,通过css和jQuery实现.   1.通过css实现水平居中: 复 ...

  6. div的水平和垂直居中

    CSS实现div的水平居中 div的水平居中可以通过margin设置为0 auto实现. .myDiv { width: 200px; height: 100px; margin: 0 auto; } ...

  7. DIV元素水平和垂直居中

    在前端开发过程中,经常要对元素进行居中设置.一般有水平居中,和垂直居中.一般设置水平居中简单.基本是margin:0 auto,就可以了.但是垂直居中,我们有时会觉得使用vertical-align, ...

  8. 让div等块级元素水平以及垂直居中的解决办法

    一.背景 我们在设计页面的时候,经常要把div等块级元素居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让div等块级元素居中.在本文中,我将 ...

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

    我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...

随机推荐

  1. EAPOL 协议

    EAPOL 协议 一.基本概念 EAPOL 的全称为 Extensible Authentication Protocol Over LAN,即 EAP Over Lan,也即基于局域网的扩展认证协议 ...

  2. Mybatis 的分页插件PageHelper-4.1.1的使用

    Mybatis 的分页插件 PageHelper 项目地址:http://git.oschina.net/free/Mybatis_PageHelper  文档地址:http://git.oschin ...

  3. Java Garbage Collection/垃圾收集 策略查看

    Java 的垃圾收集有各种各样的策略,默认的策略也会经常的改变. --比如到底是 serial , parallel, CMS; 具体到 Minor 怎么样,Old 又怎么样? 命令 java -XX ...

  4. Hbase之取出行数据指定部分+版本控制(类似MySQL的Limit)

    import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.CellScanner; import org. ...

  5. on delete cascade 和on update cascade

    这是数据库外键定义的一个可选项,用来设置当主键表中的被参考列的数据发生变化时,外键表中响应字段的变换规则的.update 则是主键表中被参考字段的值更新,delete是指在主键表中删除一条记录:on ...

  6. Deep Learning in Bioinformatics

    最近在学tensorflow,深度学习的开源工具,很好奇在生信领域深度学习都能做些什么东西. 镇楼的综述:Deep Learning in Bioinformatics 几篇文章读读看: Deep l ...

  7. python 暴力破解密码脚本

    python 暴力破解密码脚本 以下,仅为个人测试代码,环境也是测试环境,暴力破解原理都是一样的, 假设要暴力破解登陆网站www.a.com 用户 testUser的密码, 首先,该网站登陆的验证要支 ...

  8. 在腾讯云上创建您的SQL Cluster(3)

    版权声明:本文由李斯达原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/250 来源:腾云阁 https://www.qclo ...

  9. 加载图片、倒计时--Columbia项目总结

    CSS3 居然会在隐藏显示的时候触发,真心太神奇了(在ff下是没有用的,在chrome下才阔以) 貌似我还是写了大循环,怎么样才能优化这个循环呢 加载图片:已经用到过好多次了↓ function lo ...

  10. 关于位域如何节省内存（C++）

    位域:  最先使用在c语言中后来C++继承了这一优良的特点. 举个栗子:     int  -->  4字节   2^32位 ,如果我们只需要其表达一个0~16的数字, 使用一个int就显得稍稍 ...