<!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. Hibernate三种状态的区分，以及save,update,saveOrUpdate,merge等的使用

    Hibernate的对象有3种状态,分别为:瞬时态(Transient). 持久态(Persistent).脱管态(Detached).处于持久态的对象也称为PO(Persistence Object ...

  2. Eclipse各个版本

    Eclipse最初是由IBM公司开发的替代商业软件Visual Age for Java的下一代IDE开发环境,2001年11月贡献给开源社区,现在它由非营利软件供应商联盟Eclipse基金会. Ec ...

  3. 深入理解C++中的Const,Mutable以及Volatile

    我一直认为const表示一个常量,常量就是一个无法被修改的值,但是没有深入理解const的实现,甚至不知道mutable和volatile的存在,最近在书中看到了这一部分的知识,所以本文将详细解析这几 ...

  4. 博弈论(Game Theory) - 04 - 纳什均衡

    博弈论(Game Theory) - 04 - 纳什均衡 开始 纳什均衡和最大最小定理是博弈论的两大基石. 博弈不仅仅是对抗,也包括合作和迁就,纳什均衡能够解决这些问题,提供了在数学上一个完美的理论. ...

  5. socket编程为什么需要htonl(), ntohl(), ntohs()，htons() 函数-------转载

    在C/C++写网络程序的时候,往往会遇到字节的网络顺序和主机顺序的问题.这是就可能用到htons(), ntohl(), ntohs(),htons()这4个函数. 网络字节顺序与本地字节顺序之间的转 ...

  6. 2018百度之星开发者大赛－paddlepaddle学习（二）将数据保存为recordio文件并读取

    paddlepaddle将数据保存为recordio文件并读取 因为有时候一次性将数据加载到内存中有可能太大,所以我们可以选择将数据转换成标准格式recordio文件并读取供我们的网络利用,接下来记录 ...

  7. Unity —— 通过鼠标点击控制物体移动

    //ClickMove - - 通过鼠标点击控制物体移动 using System.Collections; using System.Collections.Generic; using Unity ...

  8. 【TCP_协议_socket接口】-jmeter

    1.ip 2.端口号 3.传入参数 4.告诉软件返回  最后以为是什么,不然就会报错 或者无限制的等待  查ascll 码表 启动接口的方法

  9. component-scan标签的use-default-filters属性的作用以及原理分析

    一.背景 ​ 我们在Spring+SpringMVC+Mybatis的集成开发中,经常会遇到事务配置不起作用等问题,有时候就是因为包扫描出了问题,其中component-scan的标签的use-def ...

  10. KETTLE：mongdb与mysql互传数据

    注:部分内容引用了 http://blog.sina.com.cn/s/blog_4ac9f56e0101g881.html 1.mongodb传数据到mysql 1)在kettle中,mongodb ...