如何让DIV在窗口水平和垂直居中
本实例以新文档开始

- 2
先放置一个div,并且设置class名为aa,赋予它css属性:
width:0;height:0;position:fixed;left:50%;rigth:50%;top:50%;bottom:50%;
- 3
在.aa中放置一个div,并且设置class名为aaa,赋予它必要的css属性:
width:600px;height:220px;margin-left:-300px;margin-top:-110px
(这里的各个属性根据需要自己设定;总之margin-left要为width一半的负值;margin-top要为height一半的负值)
这个div就是你要放内容的层


- 4
接下来要加上内容,要做到如下效果

- 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在窗口水平和垂直居中的更多相关文章
- div自动适应浏览器窗口水平和垂直居中
html <body> <div id="centerDiv">自动适应水平和垂直居中</div> </body> css ;;} ...
- div中文字水平和垂直居中的css代码
HTML元素 <div>水平垂直居中</div> css样式 div{ width:200px;height:200px; /*设置div的大小*/ border:1px so ...
- DIV里面的图片水平与垂直居中的方法
<div class=“box”> <img /> </div> 1.水平居中: 1)box设置 text-align:center ; text-alig ...
- DIV或者DIV里面的图片水平与垂直居中的方法
<div class=“box”> <img /> </div> 水平居中的常用方式: text-align:center ——这可以实现子元素字体,图片的水平居中 ...
- 基于jQuery实现的水平和垂直居中的div窗口
在建立网页布局的时候,我们经常会面临一个问题,就是让一个div实现水平和垂直居中,虽然好几种方式实现,但是今天介绍时我最喜欢的方法,通过css和jQuery实现. 1.通过css实现水平居中: 复 ...
- div的水平和垂直居中
CSS实现div的水平居中 div的水平居中可以通过margin设置为0 auto实现. .myDiv { width: 200px; height: 100px; margin: 0 auto; } ...
- DIV元素水平和垂直居中
在前端开发过程中,经常要对元素进行居中设置.一般有水平居中,和垂直居中.一般设置水平居中简单.基本是margin:0 auto,就可以了.但是垂直居中,我们有时会觉得使用vertical-align, ...
- 让div等块级元素水平以及垂直居中的解决办法
一.背景 我们在设计页面的时候,经常要把div等块级元素居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让div等块级元素居中.在本文中,我将 ...
- 让DIV水平和垂直居中的几种方法
我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...
随机推荐
- Mysql 命令行工具
1.Mysql命令行工具分为两类:服务端命令行工具和客户端命令行工具. 2.服务端工具 mysql_install_db:建库工具 mysqld_safe:Mysql服务的启动工具,mysqld_sa ...
- 【转载】【Oracle 11gR2】db_install.rsp详解
[原文]http://blog.csdn.net/jameshadoop/article/details/48086933 ###################################### ...
- Kafka文件的存储机制
Kafka文件的存储机制 同一个topic下有多个不同的partition,每个partition为一个目录,partition命名的规则是topic的名称加上一个序号,序号从0开始. 每一个part ...
- entity reference在views中的运用
一个views block可以获取从url过来的nid,某个node的有entity reference字段, 填入一点数据,然后在views里关联一下这个entity reference field ...
- ios CoreBluetooth 警告 is being dealloc'ed while pending connection
ios CoreBluetooth 警告 is being dealloc'ed while pending connection CoreBluetooth[WARNING] <CBPerip ...
- Windows下DLL查找顺序
目录 第1章说明 2 1.1 查找顺序 2 1.1.1 检查DllCharacteristics字段 3 1.1.2 读取manifset资源 3 1.1.3 读取manifs ...
- 基于websocket的jsp与java进行交互
环境:jdk.18 tomcat-7.0.70 把tomcat中的 两个jir包复制到 注意:最后部署的时候要删除掉这两个jar包 tomcate中已经有了 ebSocket对象的创建和服务器连接 ...
- mialx配置qq邮箱发送邮件
#send mail use mailx(v12.0.4)#edit configure file set smtp-use-starttlsset from=xxxxxxxxx@qq.comset ...
- 小例子(一)、MD5加密
一个MD5加密的小案例 代码如下: using System; using System.Text; using CCWin; using System.Security.Cryptography; ...
- Spring使用RowMapper将数据中的每一行封装成用户定义的类
1.dao public interface MapperSelecteAllEmpDao { public List<Emp> all(); } 2.实现类 public class M ...