.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. GridControl 复合表头（多行标题）

    说明: 最好是通过编辑视图进行设计,后台编码有点麻烦. 例图:(上面的GC是后台编写 ,下面的是设计器设计) 后台代码编写: public void InitCtrl() { DevExpress.X ...

  2. Hadoop权威指南(中文版，第2版)【分享】

    下载地址 Hadoop权威指南(中文版,第2版) http://download.csdn.net/download/u011000529/5726789 (友情提示:请点击右下的 “联通下载” 或者 ...

  3. Android自由行之走进zxing,轻松实现二维码扫描

    现在很多App都集成了扫一扫功能,最常用的微信.QQ.手机助手等.二维码也使得生活变得更加简洁,扫一扫订餐.扫一扫下载等等.那么,说到二维码,我们不得不提Google一个开源的扫码框架:zxing. ...

  4. 利用Continuous Testing实现Eclipse环境自己主动单元測试

    当你Eclipse环境中改动项目中的某个方法时,你可能因为各种原因没有执行单元測试,结果代码提交,悲剧就可能随之而来. 所幸infinitest(http://infinitest.github.io ...

  5. vs目录(继承的值)配置

    突然间,想在vs中添加自己的目录,这样以后再新建项目后,就不用再麻烦的手动添加了,比如让新建的项目都继承我的目录D:\MyInc. 事例:让新建的工程包含的目录中自动继承目录D:\MyInc 修改它的 ...

  6. 使用viewpager实现广告条轮询的效果

    先上效果图: viewpager是google在v4-support包中提供的,使用时与listview类似,度需要提供一个adapter, 只不过viewpager提供的是PagerAdapter ...

  7. CopyU!下一次更新将增加对设备厂商及型号的识别！

    CopyU!下一版本的更新将加入对设备厂商及型号的识别功能,当用户连接设备时,CopyU!将能够辨别出设备的详细型号等,能够在一定程度上帮助用户发现问题设备或仿冒设备. 敬请期待即将到来的新更新!

  8. Android开发之位置定位详解与实例解析（GPS定位、Google网络定位，BaiduLBS（SDK）定位）

    在android开发中地图和定位是很多软件不可或缺的内容,这些特色功能也给人们带来了很多方便.定位一般分为三种发方案:即GPS定位.Google网络定位以及基站定位 最简单的手机定位方式当然是通过GP ...

  9. JAVA_基础面试题

    1.面向对象的特征有哪些方面   1.抽象:抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题,而只是选择其中的一部分,暂时不用部分细节.抽 ...

  10. 转：Oracle EBS 寄售业务总结

    转自:http://blog.vsharing.com/nicr/A1359214.html 总述: 须通过一揽子采购协议(BPA)明确采购方与供应商之间的寄售关系,及各种协议条款: 通过来源补充规则 ...