<!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. Unity LineRenderer制作画版

    Source: using System.Collections; using System.Collections.Generic; using UnityEngine; public class ...

  2. 学习HTML 第五节.简单交互 加个按钮

    学习HTML 第五节.简单交互 也许你和我一样,对页面排版的兴趣小于网页交互,那么我们就先略过一些章节,直接先学一下简单交互. 前面点击图片打开链接的网址,已经是最简单的交互方式了,复杂的方式则需要用 ...

  3. 【转】自动化测试 - Appium + Python史上最全最简环境搭建步骤

    一,为什么是Appium借一张图: 1.1 Appium优点 l  开源 l  跨架构:NativeApp.Hybird App.Web App l  跨设备:Android.iOS.Firefox ...

  4. webpack Error: Cannot find module 'webpack/lib/Chunk' Extract-text-webpack-plugin 分离CSS

    深入浅出webpack 1.5章节使用Extract-text-webpack-plugin分离css 安装插件后打包提示错误 Error: Cannot find module 'webpack/l ...

  5. 【ZABBIX】SNMPtrap实现主动监控的原理与安装配置

    工欲善其事,必先利其器.作为一款强大的开源软件,Zabbix号称“Monitor Everything”,其所依赖的,很大程度上便是SNMP的数据采集支持.SNMP 协议是用来管理设备的协议,目前SN ...

  6. openstack-r版(rocky)搭建基于centos7.4 的openstack swift对象存储服务 四

    openstack-r版(rocky)搭建基于centos7.4 的openstack swift对象存储服务 一 openstack-r版(rocky)搭建基于centos7.4 的openstac ...

  7. 《Cocos2d-x游戏开发实战精解》学习笔记1--在Cocos2d中显示图像

    Cocos2d-x中的图像是通过精灵类来显示的.在Cocos2d-x中游戏中的每一个角色.怪物.道具都可以理解成是一个精灵,游戏背景作为一种特殊的单位将其理解成是一个精灵也没有什么不妥.在源文件本章目 ...

  8. Java单例模式&static成员变量 区别

    当需要共享的变量很多时,使用static变量占用内存的时间过长,在类的整个生命周期. 而对象只是存在于对象的整个生命周期.   //饿汉式 class Single//类一加载,对象就已经存在了. { ...

  9. ViewController 视图控制器的常用方法

    ViewController 视图控制器 ,是控制界面的控制器,通俗的来说,就是管理我们界面的大boss,视图控制器里面包含了视图,下面举个例子,让视图在两个视图上调转. 定义一个视图控制器: MyV ...

  10. 【beta】Scrum站立会议第7次....11.9

    小组名称:nice! 组长:李权 成员:于淼  刘芳芳韩媛媛 宫丽君 项目内容:约跑app(约吧) 时间:2016.11.9    12:00——12:30 地点:传媒西楼220室 本次对beta阶段 ...