<!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. Java函数式接口Function

    Function 提供了一个抽象方法  R apply(T t) 接收一个参数 返回 一个值,还有两个默认方法和一个静态方法 compose 是一个嵌套方法,先执行before.apply() 得到运 ...

  2. JSP处理XML数据

    以下内容引用自http://wiki.jikexueyuan.com/project/jsp/xml-data.html: 当通过HTTP发送XML数据时,使用JSP处理传入和传出的XML文件是有意义 ...

  3. 011 router backup

    Router>en Router#config t Enter configuration commands, one per line.  End with CNTL/Z. Router(co ...

  4. TCP_NODELAY和TCP_CORK nagle算法和cork算法

    TCP_NODELAY 默认情况下,发送数据採用Nagle 算法.这样尽管提高了网络吞吐量,可是实时性却减少了,在一些交互性非常强的应用程序来说是不同意的.使用TCP_NODELAY选项能够禁止Nag ...

  5. 【剑指Offer】俯视50题之31 - 40题

    面试题31连续子数组的最大和 面试题32从1到n整数中1出现的次数 面试题33把数组排成最小的数 面试题34丑数 面试题35第一个仅仅出现一次的字符 面试题36数组中的逆序对 面试题37两个链表的第一 ...

  6. js类继承扩展super

    相应的资料https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/super 例子: class Pol ...

  7. 省市县三级联动js代码

    省市县三级联动菜单,JS全国省市县(区)联动代码,一般可以用于用户注册或分类信息二手交易网站,需要的朋友直接复制代码就可以用了,不过有朋友反馈说缺少某些城市,具体缺少哪个尚不知,请想用的朋友自己补全吧 ...

  8. web 开发之js---js 多线程编程

    AJAX 开发中的难题 试试多线程编程 想了解更多 有关作者   转载注明出处:http://www.infoq.com/cn/articles/js_multithread 虽然有越来越多的网站在应 ...

  9. DBCP,C3P0,Tomcat_JDBC 性能及稳定性測试

    原创文章,转载请指明出处:http://aub.iteye.com/blog/1404219, 尊重他人即尊重自己 DBCP,C3P0,Tomcat_JDBC 性能及稳定性測试 1.測试环境: 硬件环 ...

  10. 基于 Web 的 Go 语言 IDE - Wide 1.1.0 公布！

    公布 1.1.0 这个版本号改进了非常多细节,已经全然能够用于正式项目的开发 同一时候我们上线了 Wide 在线服务 到眼下,我们提供了 Wide 和 Solo 两个在线服务,详情请看这里. Wide ...