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. 9月java货车版速记

    运算符的优先级java自带的方法正则表达式数组和二维数组:数组遍历,填充数组,数组排序,复制数组,数组查询数组算法:冒泡,选择,反转,快速类和对象:封装,继承,多态,this关键字,抽象类和接口重写和 ...

  2. 【Todo】LR-逻辑回归

    因为逻辑回归对于计算广告学非常重要.也是我们平时广告推荐.CTR预估最常用到的算法.所以单独开一篇文章讨论. 参考这篇文章:http://www.cnblogs.com/sparkwen/p/3441 ...

  3. zabbix监控系统客户端安装

    原文:http://blog.chinaunix.net/uid-25266990-id-3387002.html 测试使用agentd监听获取数据. 服务端的安装可以查看http://blog.ch ...

  4. QQ聊天即时代码

    QQ即时聊天代码:[需对方已经即时聊天工具功能 开通入口http://shang.qq.com/v3/widget.html] tencent://Message/?Uin=84065994& ...

  5. 转！！JavaBean,List,Map转成json格式

    public class User { private String username; private String password; public String getUsername() { ...

  6. 转载 uboot 命令

    1.bootm bootm [addr [arg ...]] - boot application image stored in memory passing arguments 'arg ...' ...

  7. Linux chmod命令修改文件与文件夹权限的命令附实例

    Linux chmod命令修改文件与文件夹权限的命令附实例 作者:佚名 字体:[增加 减小] 来源:互联网 时间:05-01 20:46:07我要评论 在linux中要修改一个文件夹或文件的权限我们需 ...

  8. Fragment 笔记

    1.getActivity()  为null问题 在Fragment基类里设置一个Activity mActivity的全局变量,在onAttach(Activity activity)里赋值,使用m ...

  9. 如何进行shell脚本正确性测试

    在实际工作中,需要对shell脚本进行正确性测试. 如何用最快最有效的方式进行测试? 很多开发的习惯是,二话不说,写完/拿到,就跑一把,看看输入,输出,想要的操作是否完成,也就过了. 其实这是十分不严 ...

  10. Xml反序列化

    XML的反序列化可在类的属性上标记特性来隐射反序列化.例如这种形式 public class PaymentAccount { [XmlAttribute("name")] pub ...