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. maven项目搭建

    一.Maven简介 Maven是基于Java平台的项目构建(mvn clean install).依赖管理(中央仓库,Nexus)和项目信息管理的项目管理工具. Maven是基于项目对象模型(POM) ...

  2. NullPointerException异常的原因？？

    所谓空指针异常,是因为用空(null)去调用属性或方法.   null表示没有这个对象,既然没有这个对象,那么去调用他的属性和方法,就会报异常.   <--主要有以下几种原因:   1.使用了未 ...

  3. centos7 php7 安装composer时Failed to decode zlib stream解决办法

    1 下载安装脚本 php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" 2 运行安装脚 ...

  4. java虚拟机(一)——内存管理机制与OOM异常

    一  java内存区域与内存溢出异常(OOM) 1)运行时数据区域划分        1.程序计数器(Program Conuter Register) 程序计数器是一块较小的内存空间,它是当前线程执 ...

  5. 20160805_CentOS6_控制台切换

    1. Ctrl + Alt + F1~F6 Ctrl + Alt + F1 是 图形界面(如果装了的话),后面的是 控制台界面 2. 3.

  6. 2016最全的web前端面试题及答案整理

    面试web前端开发,不管是笔试还是面试,都会涉及到各种专业技术问题,今天小编整理了一些常见的web前端面试题及答案,希望对大家有所帮助. 1.常用那几种浏览器测试?有哪些内核(Layout Engin ...

  7. html5常用API之Full Screen

    所谓Full Screen API,就是全屏API,在html5中,该API允许开发者以编程方式将Web应用程序全屏运行,使Web应用程序更像本地应用程序.这款API十分简单有用,是html5初学者必 ...

  8. commonJS — DOM操作（for DOM）

    for DOM github: https://github.com/laixiangran/commonJS/blob/master/src/forDOM.js 代码 /** * Created b ...

  9. K-均值聚类及其在生物信息中的应用

    如果一点基础没有最好先拿起一本教材开始学,<机器学习实战>还不错,P93,书上有python源码和练习数据,非常适合新手. k均值聚类 名词:簇:相似度算法 伪代码 创建K个点作为起始质心 ...

  10. ios AudioQueueStart returns -50 录音失败问题

    ios AudioQueueStart returns -50 录音失败问题 使用iOS录音时,如果在应用的别处有语音的操作,可能会出现上述问题: 导致录音机打开失败!无法录音,并且 AudioQue ...