<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            margin:0;padding:0;

        }

        .parent {

            float: left;

            width: 100%;

            height: 200px;

            background-color: red;

        }

        .children {

            float:left;

            position:relative;

            top:50%;

            left:50%;

        }

        .children-inline {

            position: relative;

            left: -50%;

            -webkit-transform : translate3d(0, -50%, 0);

            transform : translate3d(0, -50%, 0);

            background-color: black;

            color:white;

        }

    </style>

</head>

<body>

    <div class="parent">

        <div class="children">

            <div class="children-inline"><img src="http://nec.netease.com/img/s/2.jpg" alt=""/></div>

        </div>

    </div>

</body>

</html>
<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            padding:0;

            margin: 0;

        }

        .parent {

            position:relative;

            width:100%;

            height:200px;

            background:red;

        }

        .div-in {

            position:absolute;

            top:50%;

            left:50%;

        }

        .hidden-img {

            visibility:hidden;

        }

        .show-img {

            position:absolute;

            right:50%;

            bottom:50%;

        }

    </style>

</head>

<body>

<div class="parent">

    <div class="div-in">

        <img class="hidden-img" src="http://nec.netease.com/img/s/2.jpg" alt="" />

        <img class="show-img" src="http://nec.netease.com/img/s/1.jpg" alt="" />

    </div>

</div>

</body>

</html>

效果图：

利用CSS的translate属性或利用CSS实现图片居中的效果的更多相关文章

  1. css标签及属性

    css标签及属性 HTML引入CSS的方法 1.嵌入式  <style type = “text/css”>要写的样式</style> 2.外联式  <link rel ...

  2. CSS常用样式属性

    1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...

  3. 利用CSS的@font-face属性 在网页中嵌入字体

    字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...

  4. 利用IIS部署WEB网站以及解决CSS/JS不能显示问题

    利用IIS部署WEB网站以及解决CSS/JS不能显示问题 转载声明:http://blog.sina.com.cn/s/blog_a001e5980101b4kt.html vs中正常IIS发布网站后 ...

  5. 利用wget 抓取 网站网页 包括css背景图片

    利用wget 抓取 网站网页 包括css背景图片 wget是一款非常优秀的http/ftp下载工具,它功能强大,而且几乎所有的unix系统上都有.不过用它来dump比较现代的网站会有一个问题:不支持c ...

  6. jQuery结合CSS实现手风琴组件(2)----利用seajs实现静态资源模块化引入

    1. 目录结构(webStrom) 2. 代码 1.html <!DOCTYPE html> <html lang="en"> <head> & ...

  7. 利用css3的text-shadow属性实现文字阴影乳白效果

    现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...

  8. CSS Counters 计数属性

    CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素.如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image ...

  9. 重温CSS：Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

随机推荐

  1. underscore的使用

    1.链接 npm underscore:https://www.npmjs.com/package/underscore 官网:https://underscorejs.org/ 2.npm安装:np ...

  2. win7如何设置以管理员身份运行

    一.对所有程序以管理员身份运行 1.右键单击桌面“计算机”,选择“管理” 2.在页面左侧,依此打开“计算机管理(本地)→ 系统工具→本地用户和组→用户”,在右侧找到“Administrator”,双击 ...

  3. Codeforces 1203F1 Complete the Projects (easy version)

    cf题面 Time limit 2000 ms Memory limit 262144 kB 解题思路 看见这题觉得贪心可做,那就贪吧.(昨天真是贪心的一天,凌晨才被这两道贪心题虐,下午多校又来,感觉 ...

  4. 论文阅读：Andromeda: Performance, Isolation, and Velocity at Scale in Cloud Network Virtualization （全文翻译用于资料整理和做PPT版本，之后会修改删除）

    Abstract: This paper presents our design and experience with Andromeda,  Google Cloud Platform’s net ...

  5. HDU2294--Pendant（DP，矩阵优化）

    Time Limit: 6000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s) ...

  6. 使用Jacoco获取 Java 程序的代码执行覆盖率

    Jacoco是Java Code Coverage的缩写,顾名思义,它是获取Java代码执行覆盖率的一个工具,通常用它来获取单元测试覆盖率.它通过分析Java字节码来得到代码执行覆盖率,因此它还可以分 ...

  7. OI常用的常数优化小技巧

    注意:本文所介绍的优化并不是算法上的优化,那个就非常复杂了,不同题目有不同的优化.笔者要说的只是一些实用的常数优化小技巧,很简单,虽然效果可能不那么明显,但在对时间复杂度要求十分苛刻的时候,这些小的优 ...

  8. SPFA算法的判负环问题（BFS与DFS实现）

    经过笔者的多次实践(失败),在此温馨提示:用SPFA判负环时一定要特别小心! 首先SPFA有BFS和DFS两种实现方式,两者的判负环方式也是不同的.       BFS是用一个num数组,num[x] ...

  9. mybatis 注解方式插入，主键由uuid函数生成

    @SelectKey(keyProperty = "record.id", resultType = String.class, before = true, statement ...

  10. CentOS7 如何挂载网络设备

    CentOS 自动挂载网络设备的方法 手动挂载: [root@mysql ~]# mount -o username=USER,password=PASSWORD //192.168.10.212/z ...