.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. mmsql 查询每个分类的前3条数据

    select * from (select *,row_number() over(partition by PropertyRoofBeamID order by PropertyRoomID de ...

  2. Codeforces Round #382 (Div. 2)E. Ostap and Tree

    E. Ostap and Tree time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  3. 【转】以XML文件方式保存用户数据——2013-08-25 22

    正在做项目中有很多游戏数据要保存,常见的玩家数据这些比较简单的可以用CCUserDefault.它是cocos2d-x用来存取基本数据类型用的.保存为XML文件格式. 主要方法:(和java的map很 ...

  4. SVN源代码泄露

    1. 联想b2b站SVN源代码泄露 开启Firefox,输入:b2b.thinkworldshop.com.cn/.svn/entries Webserver返回如下信息:

  5. Linux启动遇到的问题

    双系统装的Ubuntu,在一次意外关机后无法进入图形界面,每次输入完密码进入桌面后又会退到密码输入界面.使用命令行df -hl查看发现根目录使用率达到100%.推测是因为意外关机导致的,但是找不到应该 ...

  6. mvn export runnable jar

    mvn dependency:copy-dependencies <build> <plugins> <plugin> <groupId>org.apa ...

  7. 组合模式(Composite Pattern)

    组合模式定义:组合模式允许你将对象组合成树形结构来表现"整体/局部"层次结构,组合能让客户以一致的方式处理个别对象以及对象组合. 当涉及到如:菜单,子菜单之类的问题时,会自然而然的 ...

  8. jQuery多图上传Uploadify插件使用及传参详解

    因为工作需要,这两天接触到了Uploadify插件,由于是第一次用,花了我近一天的时间.下面我把我在用这个插件过程详细的分享出来,也让自己巩固一下,也希望能帮助到你. 所需文件: jquery-1.8 ...

  9. MVC+Jquery+autocomplete（汉字||拼音首字母搜索）

    最近项目中用到了autocomplete了,总结一下经验. 我们先来看一下效果:

  10. SQL Server 阻止了对组件 'xp_cmdshell' 的 过程'sys.xp_cmdshell' 的访问

    sql server 2005: EXEC sp_configure N'show advanced options', N'1' RECONFIGURE WITH OVERRIDEEXEC sp_c ...