.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. 通过wifi调试Android程序

    原文:http://www.cnblogs.com/sunzhenxing19860608/archive/2011/07/14/2106492.html 1.首先让android手机监听指定的端口: ...

  2. JS中比較2个字符串内元素的不同(字符1, 字符2, 分隔符可选)

    比較2个字符串内元素的不同(字符1, 字符2, 分隔符可选) 文件: diff.js // 演示样例使用方法 /* var str1 = "tie, mao, 55"; var s ...

  3. 导出项目为jar包

  4. ognl表达式和s标签

    1.ognl表达式: Ognl上下文对象:(他是一个可以存储数据的空间结构,而且在这个结构中包含之前 jsp中的作用域对象) (放在 value stack控件),当前访问的Action这个上下文对象 ...

  5. oracle ebs中并发程序定义查询sql

    ---concurrent program define SELECT FCPV.CONCURRENT_PROGRAM_ID, FCPV.CONCURRENT_PROGRAM_NAME, FCPV.U ...

  6. HTML表单元素中disabled的元素的值不会提交到服务器

    一.在HTMl页面的form表单中对disabled的元素的属性和值不会提交到服务器 实例1: <form action="#"> <input type=&qu ...

  7. ACM——A + B Problem (1)

    A + B Problem (1) 时间限制(普通/Java):1000MS/3000MS          运行内存限制:65536KByte总提交:5907            测试通过:151 ...

  8. 使用ROW_NUMBER进行的快速分页

    DECLARE @pageSize INT ; DECLARE @pageIndex INT ; SET @pageSize = 5 SET @pageIndex =2 ; --第二页,每页显示5条数 ...

  9. 华为j2ee面试题

    http://blog.csdn.net/chow__zh/article/details/7741312 java基础1.垃圾回收的优点和原理.      Java语言中一个显著的特点就是引入了垃圾 ...

  10. 是么是 API 和 SDK

    API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码 ...