<!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. Visual Studio设置字体及护眼背景色

    打开vs 菜单栏选择: 工具 -> 选择 -> 环境 -> 字体和颜色,如图所示 字体可以如上选择,背景色选择项背景,点击自定义,如下设置即可.

  2. Phaser游戏框架与HTML Dom元素之间的通信交互

    本想按照PHASER的HTML Dom元素官方实例:http://labs.phaser.io/index.html?dir=game%20objects/dom%20element/&q=  ...

  3. Spark任务执行期间写临时文件报错导致失败

    spark任务在执行期间,有时候会遇到临时目录创建失败,导致任务执行错误. java.io.IOException: Failed to create local dir in -- spark执行过 ...

  4. day-19 多种优化模型下的简单神经网络tensorflow示例

    如下样例基于tensorflow实现了一个简单的3层深度学习入门框架程序,程序主要有如下特性: 1.  基于著名的MNIST手写数字集样例数据:http://yann.lecun.com/exdb/m ...

  5. 美国警察iPhone数据线挡住歹徒子弹获救

    泡泡网手机频道11月1日 现在手机的功能越来越丰富,不仅可以接打电话.收发短信.玩游戏聊天,关键时刻还能救命.前天HTC手机再次忠心护主,让许多同学对HTC赞赏有加.而现在又有人捡了一条命,不过这次救 ...

  6. Live Love（思维）

    DreamGrid is playing the music game Live Love. He has just finished a song consisting of n notes and ...

  7. Intense Heat（前缀和或尺取）

    The heat during the last few days has been really intense. Scientists from all over the Berland stud ...

  8. 作业 20181120-3 Beta发布

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2408 小组介绍 组长:付佳 组员:张俊余 李文涛 孙赛佳 田良 于洋 段 ...

  9. 第18次Scrum会议（10/30）【欢迎来怼】

    一.小组信息 队名:欢迎来怼小组成员队长:田继平成员:李圆圆,葛美义,王伟东,姜珊,邵朔,冉华 小组照片 二.开会信息 时间:2017/10/30 17:19~17:38,总计19min.地点:东北师 ...

  10. 《Linux内核与分析》第八周

    by 20135130王川东 一.进程切换关键代码switch-to分析     1.进程调度与进程调度时机分析 1)不同类型的进程有不同的调度要求 分类:I/0-bound:频繁的进行I/o 通常会 ...