.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. 【javascript】复制到剪贴板功能（支持目前各种浏览器）

    本demo支持各种浏览器复制,亲测可用(IE8,IE9,IE10,火狐,谷歌). 本demo中使用了ZeroClipboard(下载地址:https://github.com/zeroclipboar ...

  2. SQLite 入门教程（一）基本控制台（终端）命令 （转）

    转于: SQLite 入门教程(一)基本控制台(终端)命令 一.基本简介   SQLite 是一个自持的(self-contained).无服务器的.零配置的.事务型的关系型数据库引擎.因为他很小,所 ...

  3. Android应用换肤总结

    换肤,我们都很熟悉,像XP的主题,塞班的主题.看过国外的一些技术博客,就会发现国内和国外对软件的,或者说移动开发的软件的需求的不同.国外用户注重社交.邮件等功能,国内用户则重视音乐.小说.皮肤等功能, ...

  4. PetShop 4.0学习笔记：消息队列MSMQ

    直到今天才知道,在我们每天都在用的Window系统里还有这么好用的一个编程组件:消息队列.它能够解决在大数据量交换的情况下的性能问题,特别是BS系统的数据库性能.而且它的异步处理方式能给程序员最大的便 ...

  5. Java-WebSocket

    A barebones WebSocket client and server implementation written in 100% Java. http://java-websocket.o ...

  6. oc学习笔记2

    .oc中的BOOL类型 oc中的BOOL类型的值为YES和NO,有点小奇怪 在oc中YES不等于1,但是NO一定等于0,所以不要把1和YES来比较 .消息发送 在oc中,经常使用这样的术语:将allo ...

  7. 对ContentProvider中getType方法的一点理解

    在上篇博客中我们介绍了自定义ContentProvider,但是遗漏掉了一个方法,那就是getType,自定义ContentProvider一般用不上getType方法,但我们还是一起来探究下这个方法 ...

  8. Linux软件安装与卸载

    一. 了解Linux应用软件安装包: 通常Linux应用软件的安装包有三种: 1) tar包,如software-1.2.3-1.tar.gz.它是使用UNIX系统的打包工具tar打包的. 2) rp ...

  9. 盘点 Github 所用到的开源项目

    http://www.php100.com/html/it/mobile/2014/0401/6736.html 在致力于开源事业的同时,Github也使用一些非常优秀的开源项目的来打造自己的平台与服 ...

  10. Asp.net日期字符串格式化显示

    我们经常会遇到对时间进行转换,达到不同的显示效果,默认格式为:2006-6-6 14:33:34 如果要换成成200606,06-2006,2006-6-6或更多的格式该怎么办呢?这里将要用到:Dat ...