<!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. 深入解析QML引擎, 第3部分: 绑定类型

    原文 QML Engine Internals, Part 3: Binding Types 译者注:这个解析QML引擎的文章共4篇,分析非常透彻,在国内几乎没有找到类似的分析,为了便于国内的QT/Q ...

  2. 内容安全策略（CSP）

    内容安全策略(CSP),其核心思想十分简单:网站通过发送一个 CSP 头部,来告诉浏览器什么是被授权执行的与什么是需要被禁止的.其被誉为专门为解决XSS攻击而生的神器. 1.CSP是什么 CSP指的是 ...

  3. selenium自动化之稳定版本环境介绍

    大家都知道,目前selenium版本已经升级到3.0了,selenium3只是在selenium2的基础上做了一些调整,最明显的区别就是 selenium2对Firefox的支持最高只支持46及以下版 ...

  4. JMeter怎样测试WebSocket

    一.安装WebSocket取样器 1.从JMeter插件管理器官网下载: https://jmeter-plugins.org/ 把这6个jar包放到C:\JMeter\apache-jmeter-3 ...

  5. Python基础入门（模块和包）

    1 模块 1.1 什么是模块 在 Python 中,一个 .py 文件就称之为一个模块(Module). 我们学习过函数,知道函数是实现一项或多项功能的一段程序 .其实模块就是函数功能的扩展.为什么这 ...

  6. asp.net mvc access数据库操作

    连接access数据库其实也简单,只要按照mvc的模式来就可以,遵循c v约定就可以 既然渲染试图是强类型,那么取得的数据就转换成强类型,其他一切和asp.net操作一样 DB mydb = new ...

  7. 04慕课网《vue.js2.5入门》——Vue-cli开发todolist

    主要文件目录: 文件代码: 根实例,初始化vue: <!--index.html,网站入口页面,和main.jsp组成一套.vue文件,包含--> <!DOCTYPE html> ...

  8. Pyhont:内建函数enumerate

    1.enumerate的中文意思 2.enumerate参数为可遍历的变量,如字符串.列表等,其返回值为enumerate类. 3.enumerate多用在for循环中得到计数 . [注]:若在for ...

  9. 【IdentityServer4文档】- 使用客户端凭据保护 API

    使用客户端凭据保护 API quickstart 介绍了使用 IdentityServer 保护 API 的最基本场景. 接下来的场景,我们将定义一个 API 和一个想要访问它的客户端. 客户端将在 ...

  10. 团队项目利用Msbuild自定义Task实现增量发布

    最近一直在做自动部署工具,主要利用到了Msbuild的自定义Task,通过Task我们可以自定义编译.部署过程减少人工直接干预.Msbuild的详细用法,可以去园子里搜一下,有很多的基础教程,这里就不 ...