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. Mysql 命令行工具

    1.Mysql命令行工具分为两类:服务端命令行工具和客户端命令行工具. 2.服务端工具 mysql_install_db:建库工具 mysqld_safe:Mysql服务的启动工具,mysqld_sa ...

  2. 【转载】【Oracle 11gR2】db_install.rsp详解

    [原文]http://blog.csdn.net/jameshadoop/article/details/48086933 ###################################### ...

  3. Kafka文件的存储机制

    Kafka文件的存储机制 同一个topic下有多个不同的partition,每个partition为一个目录,partition命名的规则是topic的名称加上一个序号,序号从0开始. 每一个part ...

  4. entity reference在views中的运用

    一个views block可以获取从url过来的nid,某个node的有entity reference字段, 填入一点数据,然后在views里关联一下这个entity reference field ...

  5. ios CoreBluetooth 警告 is being dealloc'ed while pending connection

    ios CoreBluetooth 警告 is being dealloc'ed while pending connection CoreBluetooth[WARNING] <CBPerip ...

  6. Windows下DLL查找顺序

    目录 第1章说明    2 1.1 查找顺序    2 1.1.1 检查DllCharacteristics字段    3 1.1.2 读取manifset资源    3 1.1.3 读取manifs ...

  7. 基于websocket的jsp与java进行交互

    环境:jdk.18   tomcat-7.0.70 把tomcat中的 两个jir包复制到 注意:最后部署的时候要删除掉这两个jar包 tomcate中已经有了 ebSocket对象的创建和服务器连接 ...

  8. mialx配置qq邮箱发送邮件

    #send mail use mailx(v12.0.4)#edit configure file set smtp-use-starttlsset from=xxxxxxxxx@qq.comset ...

  9. 小例子(一)、MD5加密

    一个MD5加密的小案例 代码如下: using System; using System.Text; using CCWin; using System.Security.Cryptography; ...

  10. Spring使用RowMapper将数据中的每一行封装成用户定义的类

    1.dao public interface MapperSelecteAllEmpDao { public List<Emp> all(); } 2.实现类 public class M ...