.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. VC++ 统计文件夹下面的当日和本月生成的图片

    void GetCapNum(int * todayNum, int * mouthNum) {    string path = ".\\res";//路径位于程序运行目录下的r ...

  2. dublin core实例

    <?xml version="1.0"?> <metadata xmlns="http://example.org/myapp/" xmlns ...

  3. ubuntu压缩解压

    ubuntu安装解压rar   一般通过默认安装的ubuntu是不能解压rar文件的,只有在安装了rar解压工具之后,才可以解压.其实在ubuntu下安装rar解压工具是非常简单的,只需要两个步骤就可 ...

  4. 两个select级联操作实例（教师职称类型与职称）

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  5. [ES6] 22. Const

    'const' keyword is for creating a read only variable, something you can never change once created. ' ...

  6. [React] React Fundamentals: State Basics

    State is used for properties on a component that will change, versus static properties that are pass ...

  7. CRF++使用小结（转）

    1. 简述 近期要应用CRF模型,进行序列识别.选用了CRF++工具包,详细来说是在VS2008的C#环境下,使用CRF++的windows版本号.本文总结一下了解到的和CRF++工具包相关的信息. ...

  8. Linux 汇编语言开发指南

    http://www.ibm.com/developerworks/cn/linux/l-assembly/

  9. 删除主目录下的.ssh目录下文件对boot2docker启动影响

    现象: 1) boot2docker ssh需要输入密码 2) boot2docker start 或 up 需要输入密码 解决方法: 1)删除 /Users/sunzhaoyu/.boot2dock ...

  10. linux中的openoffice服务终止运行

    现象: 最近的linux中的openoffice服务进程运行一段时间后会自动停止,刚开始还以为忘了启动执行自启动脚本导致的.在连续出现前述情况后,开始查找应用程序崩溃的原因,首先查看linux服务器的 ...