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: 0;
    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;
}  

效果：http://runjs.cn/code/1zvstbad

抄袭于：http://itakeo.com/blog/2015/09/17/csscenter/?none=121