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. Android Menu菜单使用

    如上图右上角,菜单选项的编辑,第一种代码实现方式如下: package com.example.menu; import android.os.Bundle; import android.app.A ...

  2. Http报头Accept与Content-Type的区别

    Http报头Accept与Content-Type的区别 1.Accept属于请求头, Content-Type属于实体头. Http报头分为通用报头,请求报头,响应报头和实体报头. 请求方的http ...

  3. TP学习笔记

    ThinkPHP采用单一入口模式访问应用,对应用的所有请求都定向到应用的入口文件,系统会从URL参数中解析当前请求的模块.控制器和操作,下面是一个标准的URL访问格式: http://serverNa ...

  4. ajax请求超时时间

    http://www.cnblogs.com/charling/p/3356216.html get post 请求 http://www.cnblogs.com/oneword/archive/20 ...

  5. bottomNavigationBar 底部导航tab MD

    1.先上图: 此底部Tab完全可以满足日常的开发 2.使用: 很简单,使用Gradle构建:compile ‘com.ashokvarma.android:bottom-navigation-bar: ...

  6. C++/C#中堆栈、对象内存模型、深浅拷贝、Array.Clone方法

    转载自:http://blog.csdn.net/jarvischu/article/details/6425534 目录 1.      C++/C#中对象内存模型................. ...

  7. angular 零碎知识

    各种服务: $location:可以监听事件的改变 link 在没有设置template的情况下,指令作为标签使用的时候,ele是指令(伪数组的形式); * 如果指令作为属性使用的话,ele是使用该指 ...

  8. VBA中四种自动运行的宏以及模块的含义

    在Excel的“标准模块”中可以创建4种自动运行的宏,它们分别是Auto_Open(打开工作 簿时自动运行), Auto_Close, Auto_Activate,  Auto_Deactivate. ...

  9. centos7配置mono和jexus5.6.2

    一.通过集成包安装mono: 1.添加Mono的 包库源: 把Mono Project public Jenkins GPG signing  导入系统 wget http://jenkins.mon ...

  10. 为什么要使用SLF4J而不是Log4J

      每一个Java程序员都知道日志对于任何一个Java应用程序,尤其是服务端程序是至关重要的,而很多程序员也已经熟悉各种不同的日志库如java.util.logging.Apache log4j.lo ...