css各种水平垂直居中
css各种水平垂直居中，网上查了一下，总结以下几种
line-height垂直居中
缺点，仅限于单行文字
.item{
text-align: center;
height: 100px;
line-height: 100px;
}效果：http://runjs.cn/code/rmjiq3a8
padding垂直居中
缺点，内容不确定时，高度不好固定.item{
padding: 40px 0;
}效果：http://runjs.cn/code/hg5yrpm8
margin垂直居中
需要知道父层和子层高度，然后marginLeft && marginTop = 父层/2 - 子层/2；
缺点，不灵活.wrap{
height: 100px;
width: 220px;
}
.item{
width: 100px;
height: 30px;
margin-top: 35px;
margin-left: 60px;
}效果：http://runjs.cn/code/tvewrftd
position垂直居中
需要知道子层高度，根据子层高度来设置margin；
缺点，不灵活.wrap{
position: relative;
width:220px;
height: 200px;
}
.item{
position: absolute;
width: 100px;
height: 50px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -25px;
}效果：http://runjs.cn/code/hkpk8zdr
position垂直居中二
内容div固定宽高，不固定宽高都可以，但是父层貌似必须有宽高。
缺点：父层宽高，比较灵活.wrap{
position: relative;
width:220px;
height: 200px;
}
.item{
width: 100px;height: 50px;
margin:auto;
position: absolute;
left: 0px;
top: 0px;
right:0px;
bottom: 0px;
}效果：http://runjs.cn/code/lo7kn0lx
css3的calc垂直居中
也是需要知道父层宽高和自身宽高；
缺点，不灵活，兼容性.wrap{
width:220px;
height: 150px;
overflow: hidden;
}
.item{
width: 100px;
height: 40px;
margin:0 auto;
margin-top: calc(150px/2 - 40px/2);
}效果：http://runjs.cn/code/jsuy1smh
css3的translate垂直居中
这个是最方便，尤其在移动端，简直神器！.wrap{
width:220px;
height: 150px;
overflow: hidden;
}
.item{
width: 100px;
height: 40px;
margin:0 auto;
position: relative;
top: 50%;
transform:translate3d(0px,-50%,0px);
}效果：http://runjs.cn/code/wnpyt6qq
text-align + vertical-align垂直居中
添加一个占位标签。
没啥大缺点，多加了一个标签.wrap{
height: 150px;
width:220px;
}
.placeholder{
overflow: hidden;
width:;
min-height: inherit;
height: inherit;
vertical-align: middle;
display: inline-block;
} .item{
width: 100px;
height: 50px;
vertical-align: middle;
display: inline-block;
}效果：http://runjs.cn/code/pvopbrds
text-align + line-height垂直居中
缺点：父元素必须有个行高。.wrap{
line-height: 200px;
}
.item{
line-height: normal;
vertical-align: middle;
display: inline-block;
}效果：http://runjs.cn/code/oldyl2ee
flex垂直居中。
唯一缺点就是兼容性了..wrap{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
height: 150px;
}
.item{
margin:auto; //这句话是关键
width: 100px;
height: 50px;
}效果：http://runjs.cn/code/g8wqi2kx
flex垂直居中二
唯一缺点就是兼容性.wrap{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
height: 150px;
align-items: center ;
justify-content: center;
}
.item{
width: 100px;
height: 50px;
background: #555;
line-height: 50px;
}效果：http://runjs.cn/code/qsdrl4tk
table垂直居中
利用table表格的属性，来居中元素.wrap{
display: table-cell;
vertical-align: middle;
text-align: center;
height: 150px;
}
.item{
width: 100px;
line-height: 50px;
display: inline-block; //转换为内联元素
}效果：http://runjs.cn/code/6flrxvh2
使用button标签
.wrap{
height: 150px;
background: #222;
border-radius: 0px;
border:none;
display:block;
margin:20px auto;
width: 220px;
}
.item{
width: 100px;
line-height: 50px;
display: inline-block;
}
最新文章
- JavaScript在A页面判断B页面加载完毕（iframe load）
- Oauth2.0 用Spring-security-oauth2 来实现
- Eclipse 最全快捷键
- 当我们安装使用时，会出现eclipse启动不了，出现“Java was started but returned exit code=13......”的问题
- can not find UIAutomationClient
- jQuery轮播图
- [.NET 4.5] ADO.NET / ASP.NET 使用 Async 和 Await 异步 存取数据库
- Android 自学之基本界面组件(上)
- Singleton设计模式 分类： 设计模式 2014-12-03 17:54 59人阅读 评论(0) 收藏
- ASP.NET递归添加树节点
- KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架之koahub
- Elasticsearch 数据搜索
- Kotlin——最详解的类（class）的使用
- FP-growth算法思想和其python实现
- C#高级编程（第九版） 知识点梳理
- iOS TabelViewCell 删除 编辑 插入
- 20165223 实验四 Android开发基础
- ubuntu安装驱动问题
- C# 性能优化 之 秒表 Stopwatch。
- 一些常用&实用的Linux命令