<!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. 1、Java并发性和多线程-并发性和多线程介绍

    以下内容转自http://ifeve.com/java-concurrency-thread/: 在过去单CPU时代,单任务在一个时间点只能执行单一程序.之后发展到多任务阶段,计算机能在同一时间点并行 ...

  2. 关于android中的单位（dp、sp）

    android让人头疼的适配问题. --------- Android 中的单位大概有这些: 经常使用的dip.sp.有时候用到px. --------- 介绍两个类: TypedValue:有一些单 ...

  3. Storm计算结果是怎样存放的

    Storm计算的结果存放在哪里? 刚開始接触Storm的时候.往往都会有这么一个疑问:"Storm处理后 的计算结果是保存在哪里呢?"是内存中还是在其他的地方? 官方给出的解释是: ...

  4. python批量删除文件

    敲代码測试时总会碰到要删除日志目录下的日志或者删除一些历史文件.每次都会生成,再測试的时候为了查找错误原因方便总是要在測试前删除这些文件.手动删除比較麻烦.所以写一个批量删除脚本 import os ...

  5. Kinect驱动的人脸实时动画

    近期几年.realtime的人脸动画開始风声水起.不少图形图像的研究者開始在这个领域不断的在顶级会议siggraph和期刊tog上面发文章. 随着kinect等便宜的三维数据採集设备的运用.以及其功能 ...

  6. 怎样用ccache加速cocos2d-x android版本号的编译

    下面步骤在MAC下測试通过: 首先是安装CCache, 能够用homebrew brew install --HEAD ccache 也能够用源代码安装 git clone https://githu ...

  7. mongodb的备忘录

    https://www.cnblogs.com/best/p/6212807.html

  8. Mahout贝叶斯算法拓展篇3---分类无标签数据

    代码測试环境:Hadoop2.4+Mahout1.0 前面博客:mahout贝叶斯算法开发思路(拓展篇)1和mahout贝叶斯算法开发思路(拓展篇)2 分析了Mahout中贝叶斯算法针对数值型数据的处 ...

  9. Eclipse或SVN—怎样在Eclipse中安装SVNclient插件

    1.下载SVN插件,下载地址:http://download.csdn.net/download/wangshuxuncom/7638615 2.解压下载下来的压缩文件然后依据里面名为"使用 ...

  10. MFC中按下Buttonbutton，弹出一个窗体的同一时候关闭本窗体

     CMyDlg *dlg = new CMyDlg();                //新建一个CMyDlg对象 this->ShowWindow(SW_HIDE);           ...