<!doctype html>

<html>

<head>

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

    <title>使当前对象相对于上层DIV 水平、垂直居中定位</title>

    <meta name="keywords" content="" />

    <meta name="description" content="" />

    <style type="text/css">

        .thumbBox{

            width:400px;

            height:500px;

            border:1px solid red;

        }

        .imgGoods{

            position:relative;

            left:50%;

            top:50%;

            margin-left:-135px; /* 左移 图片的一半 宽度*/

            margin-top:-65px;   /* 上移 图片的一半 高度*/

        }

    </style>

</head>

<body>

    <div style="width:300px;height:200px;border:1px solid #ccc">

        testtesretest

    </div>

    <div class="thumbBox">

        <img class="imgGoods" src="http://www.baidu.com/img/bdlogo.gif" />

    </div>

</body>

</html>

使当前对象相对于上层DIV 水平、垂直居中定位的更多相关文章

  1. 如何让div水平垂直居中

    引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...

  2. 文字以及div水平垂直居中

    文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...

  3. 【笔记】让DIV水平垂直居中的两种方法

    今天写的了百度前端学院春季班的任务:定位和居中问题  由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...

  4. DIV水平垂直居中的CSS兼容写法

    DIV水平垂直居中,非IE浏览器可以用CSS3来处理,IE浏览器中分别处理IE6和/IE7.IE8.IE9. 在IE低版本中,虽然大致上没有问题,但还是有一些细微的显示问题. 示例如下: <!D ...

  5. Div水平垂直居中的三种方法

    百度了很多种方法,很多是不起作用的.下面这些方法是我亲自试过的.希望对大家有帮助! 下面是一波代码水军. <!DOCTYPE html> <html lang="en&qu ...

  6. scss : div水平垂直居中

    scss 是一个很好用的css预处理语言,有很多很好的特性. 比如 mixin. 我们可以像使用函数那样使用mixin. 比如写一个div水平垂直居中. 上代码. @mixin absolute_ce ...

  7. 【最全】CSS盒子(div)水平垂直居中居然还有这种方式

    最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...

  8. css实现div水平垂直居中

    中秋快到了,祝大家中秋快乐. 平时大家写bug过程中肯定会遇到让div框水平或者垂直居中,然而有时候能居中,有时候不能居中.我把平时遇到的一些方法写出来,如果对你有用,那便是晴天. 1.text-al ...

  9. 【html】【10】div布局[div水平垂直居中]

    必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为: .style{margin:0 auto;} 数字0 表示上下边距是0.可以按照需要设置 ...

随机推荐

  1. 解决windows 服务中定时器timer 定时偶尔失效 问题

    最近做个windows 服务,功能是:定时执行一个任务:自动登录到一个网站后,点击相关网面上的按钮button. 在处理的过程中发现定时器老是不定时的失效,失效时间没有规律. 由于刚开始处于测试阶段, ...

  2. 人脸检测及识别python实现系列（5）——利用keras库训练人脸识别模型

    人脸检测及识别python实现系列(5)——利用keras库训练人脸识别模型 经过前面稍显罗嗦的准备工作,现在,我们终于可以尝试训练我们自己的卷积神经网络模型了.CNN擅长图像处理,keras库的te ...

  3. UTF-8编码下'\u7528\u6237'转换为中文汉字'用户'

    UTF-8编码下'\u7528\u6237'转换为中文'用户' 一.前言 有过多次,在开发项目中遇见设置文件编码格式为UTF-8,但是打开该文件出现类似\u7528这样的数据,看也看不懂,也不是平常见 ...

  4. python-redis哈希模式

    命令: hset   info name hgetall info hkeys info hvlls  info m系列批量处理: ---------------------------------- ...

  5. HPUX 配置zabbix开机自动启动

    1. 在/etc/rc.config.d目录下创建zabbixd文件,并增加以下内容:    #!/sbin/sh    # v1.0 ?zabbixd startup/kill config     ...

  6. 微软职位内部推荐-Software Engineer II_HPC

    微软近期Open的职位: Job Title: Software Engineer II_HPC Location: Shanghai, China Are you passionate about ...

  7. Hyper-V虚拟机联网设置

    转自:http://www.3lian.com/edu/2012/12-22/50492.html Windows 8中内置的Hyper-V管理器可以说给许多人带来了惊喜!在Hyper-V管理器强大的 ...

  8. Android 中的广播机制

    Android 中的广播机制 Android 中的广播,按照广播响应范围,可以分为应用内广播和全局广播.按照广播的接收方式,可以分为标准广播和有序广播. 广播的分类 响应范围 应用内广播:此类广播只能 ...

  9. 团队开发NABCD

    团队成员介绍: 李青:绝对的技术控,团队中扮演“猪”的角色,勤干肯干,是整个团队的主心骨,课上紧跟老师的步伐,下课谨遵老师的指令,课堂效率高,他的编程格言“没有编不出来的程序,只有解决不了的bug”. ...

  10. Alpha 冲刺8

    队名:日不落战队 安琪(队长) 今天完成的任务 登录的数据post. okhttp学习第二弹. 明天的计划 okhttp学习第三弹. 个人信息界面数据get. 还剩下的任务 个人信息数据get. 遇到 ...