.box{

 text-align:center;

}

.content{

 margin-top:50%;

 transform:translateY(-50%);/**沿Y轴移动**/

}

<div class="box">

 <div class="content">

 </div>

</div>

css3实现垂直居中，水平的更多相关文章

  1. CSS：使用CSS3将一个div水平和垂直居中显示

    使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...

  2. 纯CSS3实现垂直居中的九种方法

    浏览时看到的资料,每个都做了测试,很好,就先收了~ 测试的是谷歌浏览器,没有任何问题,用360,IE11,火狐,搜狗浏览器做测试时,第五个方法在360,搜狗,和IE11有点问题,第七个在IE11有问题 ...

  3. CSS3中DIV水平垂直居中-2(3)

    用到CSS3中display的新属性. HTML <div class="parent"> </div> CSS html,body{ width: 100 ...

  4. CSS3：图片水平垂直居中

    加上这两个就行 display:-webkit-box;     显示成盒子模式 -webkit-box-align:center;   垂直居中 -webkit-box-pack:center;   ...

  5. css3 transform实现水平和垂直居中

    代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. 用CSS 实现 非浮动元素的 水平居中/垂直居中/水平垂直居中

    一.水平居中 (1)行内元素解决方案 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可:   .parent { text-align:center ...

  7. CSS3实现 垂直居中 水平居中 的技巧

    1 1 1 How To Center Anything With CSS Front End posted by Code My Views 1 Recently, we took a dive i ...

  8. css3图片垂直居中

    图片相对父元素垂直居中, css3属性给父级元素设置 display: -webkit-box; -moz-box-align: center; -webkit-box-align: center; ...

  9. css3 div垂直居中

    css3: #dd{ height: 300px; background: #0000cc; display: -webkit-box; display: flex; display: -webkit ...

随机推荐

  1. JDK之jstat的用法

    http://www.51testing.com/html/92/77492-203728.html jstat的用法 用以判断JVM是否存在内存问题呢?如何判断JVM垃圾回收是否正常?一般的top指 ...

  2. ABAP多表关联查询

    inner join(等值连接) 只返回两个表中联结字段相等的行 left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表中的所有 ...

  3. Repository模式介绍汇总

    1.Linq To Sql中Repository模式应用场景 http://www.cnblogs.com/zhijianliutang/archive/2012/02/24/2367305.html ...

  4. eclipse设置快捷键sysout+Alt+/后出System.out.println！亲測可用！

    曾经一直用myeclipse,没有这方面的顾虑,如今换到了eclipse,非常多要自己设置了,比方非常多快捷键. 最经常使用的,执行到sysout ,eclipse总是不自己主动补全,非常是恼火!!! ...

  5. 在 Android 的 IM 应用中使用 asmack 库实现用户头像的传输(基于VCard协议)

    http://quietmadman.blog.51cto.com/3269500/1359495 Beem http://beem-project.com/projects/beem/reposit ...

  6. mysql my.ini 详解

    linux下mysql配置文件my.cnf详解[转]   basedir = path 使用给定目录作为根目录(安装目录). character-sets-dir = path 给出存放着字符集的目录 ...

  7. Top 10 Questions about Java Exceptions--reference

    reference from:http://www.programcreek.com/2013/10/top-10-questions-about-java-exceptions/ This arti ...

  8. phpcms 源码分析一： common.inc.php

      其实就是从网上找到的的逆雪寒的分析, 我下来之后发现格式和错字的问题,非常影响阅读,现在我就是做了下搬运工的角色, 同时将格式调整到可读性提高点而已,让各位看官稍微舒心点: 下面进入整体: < ...

  9. Java IO学习笔记

    Java流的分类,一般可按以下方式分: 按方向分,分为输入流,输出流. 按类型分,分为字节流和字符流. 2.1字节流是通过字节来读取数据 2.2字符流是通过字符来读取数据 按操作方式分,分为节点流和过 ...

  10. 获取随机颜色js

    获取随机颜色方法一: function randomColor1() { var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16); i ...