.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. 解决linux redhat6下安装git的问题

    今天用到linux上的git安装过程比较曲折,记录一下: 首先会报需要perl rpm -ivh git-1.7.1-14.2.x86_64.rpm warning: git-1.7.1-14.2.x ...

  2. Log4E

    工具地址:http://marketplace.eclipse.org/content/log4e Log4E插件能够帮助你在Java项目中轻松地创建记录器.它可以在以下几个任务中提供帮助:记录器声明 ...

  3. DNF即将代替Yum

    也许你会惊奇在新安装的 Fedroa 22中没有找到 yum 包,也不明白为何在调用 /usr/bin/yum 或使用各种 Yum 插件时会得到警告.嗯,你看到的没错,Yum 已经去了~.直白的说, ...

  4. [转] JAVA正则表达式：Pattern类与Matcher类详解(转)

    java.util.regex是一个用正则表达式所订制的模式来对字符串进行匹配工作的类库包.它包括两个类:Pattern和 Matcher Pattern 一个Pattern是一个正则表达式经编译后的 ...

  5. PHP第四章数组2

    $str =array("dd"=>"d","dc"=>"ds","dd"=>&q ...

  6. 通用的 makefile 小工具分享 - Easymake 使用说明

    Easymake 使用说明 介绍 Easymake 是一个在linux系统中 C/C++ 开发的通用 makefile.在一个简单的 C/C++ 程序中使用 easymake,你甚至可以不写一行 ma ...

  7. Ganymed SSH-2 for Java

    Ganymed SSH-2 for Java是一个纯Java实现的SHH2库,官网为http://www.ganymed.ethz.ch/ssh2/,最新的更新时间为2006年10月,在用之前,请仔细 ...

  8. Scala应用函数

    我们使用“_” 来代替单个的参数,实际上你也可以使用“_”来代替整个参数列表,比如说,你可以使用 print _ 来代替 println (_). someNumbers.foreach(printl ...

  9. tcl/tk实例详解——glob使用例解

    glob命令 这里以实例的形式解释一下glob命令的用法,很多时候纯粹的语法讲解根本讲不清楚,往往没有一个例子清晰,一下就glob命令进行一些分析,环境为Tclsh85,操作系统为windows XP ...

  10. day-3

    /* 快noip了!!!感觉还有好多事要做 上午考试 原题没做 自己找了套题 挺水的 T1模拟(然而没认真读题 90) T2 dp+简单优化 数据有点问题 T3 暴力状丫 然而写丑了 60分的要两秒多 ...