<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>测试</title>

<style>

    .div1{ position:absolute;

    top:50%;

    left:50%;

    margin:-150px 0 0 -150px;

    width:300px;

    height:300px;

    background:#ccc;}

</style>

</head>

<body>

<div class="div1"></div>

</body>

</html>
 其实解决的思路是这样的：首们需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。

如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于浏览器的样式编写 

注：上面的是一般用于垂直居中与浏览器，想解决div垂直居中与外层div的话，只需要给外层div加上position:relative;就好了；记住，外层div要设定高度和宽度

实现div左右上下都居中的更多相关文章

  1. 如何让div上下左右都居中

    在做登陆页面的话,需要login的div 上下左右都居中. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...

  2. 使图片相对于上层DIV始终水平、垂直都居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 如何让图片相对于上层DIV始终保持水平、垂直都居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 如何将一个div盒子水平垂直都居中？

    html代码如下: 固定样式: 方法一:利用定位(常用方法,推荐) .parent{ position:relative; } .child{ position:absolute; top:50%; ...

  5. 多个div并排显示的居中问题——来自腾讯的一道面试题

    前两天曲面了一下腾讯,被鄙视了... 自己太水了,且面试官对我可能也有点不爽,说什么还没叫我我就去了,可是尼玛写的面试时间是3点40,我特码进去的时候都3点50了,我还以为晚了呢,他妈的. 实现几个d ...

  6. HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结

    最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单. 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法 下面说两 ...

  7. css3-7 如何让页面元素水平垂直都居中（元素定位要用css定位属性）

    css3-7 如何让页面元素水平垂直都居中(元素定位要用css定位属性) 一.总结 一句话总结:元素定位要用css定位属性,而且一般脱离文档流更加好操作.先设置为绝对定位,上左都50%,然后margi ...

  8. div中的内容居中

    要使div中的内容居中显示,不仅div要设定“text-align:centr"  ,内置对象要添加margin:auto;属性才能使其在firefox等其他浏览器中也能居中.

  9. div居中和table居中，jQuery获取下拉列表值

    一.div居中 margin-left: auto;margin-right: auto; <div  style="width:960px ; margin-left: auto;m ...

随机推荐

  1. mysql利用timestamp来进行帖子排序

    select * from table order by timestamp descorder by 该列 desc timestamp字段也可以用来排序,对应Java类型的.net.timesta ...

  2. [教程] NETGEAR R7800 路由器TFTP刷机方法（适用于.img格式固件各种刷）

    本教程是我参照R7800的OP/LEDE固件交流群内文件做的教程,可以说是完善.补充吧. 本帖适用于:① 原厂固件刷原厂固件:② 原厂固件刷第三方固件(.img格式):③ 第三方固件刷回原厂固件(.i ...

  3. openWrt 安装管理界面luci中文包

    openWrt15安装管理界面luci中文包   如果刚刷的openwrt15没有中文界面,用ssh连接路由后用opkg安装     root@bang-bang-tang:~# opkg insta ...

  4. poj3511--A Simple Problem with Integers（线段树求和）

    A Simple Problem with Integers Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 60441   ...

  5. iOS开发 - NSScanner的使用方法

    NSScanner这个类,用于在字符串中扫描指定的字符. 能够在创建NSScanner时指定它的string属性.然后scanner会依照要求从头到尾地扫描这个字符串中的每一个字符.扫描动作会使扫描仪 ...

  6. StringBuffer疑问

    为何结果为AB.B? public static void main(String[] args) { StringBuffer a=new StringBuffer("A"); ...

  7. linux一些硬件详情查看的高级方法（网卡，内存，硬盘，cpu）

    网卡-lspci内存大小和个数—— dmidecode|grep -A16 "Memory Device$"查看硬盘型号——smartctl -a /dev/sda查看硬盘大小—— ...

  8. c#实例化继承类，必须对被继承类的程序集做引用 .net core Redis分布式缓存客户端实现逻辑分析及示例demo 数据库笔记之索引和事务 centos 7下安装python 3.6笔记 你大波哥~ C#开源框架（转载） JSON C＃ Class Generator ---由json字符串生成C＃实体类的工具

    c#实例化继承类,必须对被继承类的程序集做引用   0x00 问题 类型“Model.NewModel”在未被引用的程序集中定义.必须添加对程序集“Model, Version=1.0.0.0, Cu ...

  9. S5P4418裸机开发系列教程－－源代码下载

    S5P4418裸机系列教程之stdio S5P4418裸机系列教程之shell命令行 S5P4418裸机系列教程之串口回显 S5P4418裸机系列教程之复位測试 S5P4418裸机系列教程之led跑马 ...

  10. please get a license from www.texturepacker.com

    我们在使用texturepacker创建资源后,在使用资源时出现下述问题:please get a license from www.texturepacker.com 如图: 这个是由于我们的版本号 ...