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. POJ 2385 Apple Catching

    比起之前一直在刷的背包题,这道题可以算是最纯粹的dp了,写下简单题解. 题意是说cows在1树和2树下来回移动取苹果,有移动次数限制,问最后能拿到的最多苹果数,含有最优子结构性质,大致的状态转移也不难 ...

  2. Handler详解系列(四)——利用Handler在主线程与子线程之间互发消息,handler详解

    MainActivity如下: package cc.c; import android.app.Activity; import android.os.Bundle; import android. ...

  3. JavaScript屏蔽Backspace键

    原文:http://www.cnblogs.com/xdp-gacl/p/3785806.html 今天在IE浏览器下发现,当把使用readonly="readonly"属性将文本 ...

  4. HTML的<body>标签详解与HTML常用的控制标记

    一.<body>标签: 用于标记网页的主体,body 元素包含文档的所有内容(比如文本.超链接.图像.表格和列表等等.) 1.body标签中可用的属性: bgcolor="颜色值 ...

  5. Illegal mix of collations (big5_chinese_ci,IMPLICIT) and (utf8_general_ci,COERCIBLE) for operation 'like'

    解释: 非法的混合排序规则(big5_chinese_ci)和(utf8_general_ci)操作“like”. 原本是单个字段查询数据的,现在是把所有的字段用一个搜索框来查询. 主要出问题是下列这 ...

  6. Asp.NET设置Session过期时间的四种方式

    在Asp.net中,可以有四处设置Session的过期时间: 一.全局网站(即服务器)级 IIS-网站-属性-Asp.net-编辑配置-状态管理-会话超时(分钟)-设置为120,即为2小时,即120分 ...

  7. WPF:ListView数据绑定及Style

    DrugRecordsWin.xaml <ListView Grid.Row="4" Grid.Column="1" Name="list_Dr ...

  8. 看懂UML图

    看懂UML类图和时序图 这里不会将UML的各种元素都提到,我只想讲讲类图中各个类之间的关系: 能看懂类图中各个类之间的线条.箭头代表什么意思后,也就足够应对 日常的工作和交流: 同时,我们应该能将类图 ...

  9. (转)codeblock(常用快键)

    一款开源的C/C++ IDE(集成开发环境),基于wxWidgets GUI体系,跨平台支持. 编辑器 快捷键 功能 Ctrl+Z 恢复上一次操作 Ctrl+Shift+Z 重复上一次操作 F11 切 ...

  10. 数据库索引<二> 如何创建索引

    前面一篇说法了索引结构,和几种索引在数据表上的结构,了解了索引可以为查询服务,这篇说一说如何创建索引. >平时可能的创建方式 这个系统中要用到A字段,B字段,C字段做为查询的条件,联接的条件较多 ...