一、单行垂直居中
如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。
如：
div {
height:25px;
line-height:25px;
overflow:hidden;
}
这段代码很简，后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。更多CSS教
程。
二、多行未知高度文字的垂直居中
如果一段内容，它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法，就是设定Padding，使上下的
padding值相同即可。同样的，这也是一种“看起来”的垂直居中方式，它只不过是使文字把<div>完全填充的一种访求而已。可以使用类似下
面的代码：
div {
padding:25px;
}
三、多行文本固定高度的居中
在本文的一开始，我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display
属性能够模拟<table>，所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意，display:table和
display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素：
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
760px;
}
四、未知宽带高的div主要是在外面包一个DIV利用表格样式
在css里面有个display:table-cell;属性值可以让元素渲染为表格单元格，就可以轻松实行让子元素水平垂直居中了，自己试下
<style>
.wrap {display:table-cell; 300px; height:300px; text-align:center; vertical-align:middle; background:rgba(0,0,0,0.5);}
.test {background:red; display:inline-block;}
</style>
<div class="wrap">
<div class="test">
水平垂直居中了吧<br>
两行文字哦
</div>
</div>
五、浮动情况下不知宽高的元素中的居中
这是这两天遇到的一个问题，现在增加一下，因为浮动元素会脱离标准流，也就是原来的位置，所以元素的高度要撑起来必须要它的所有父级都为100%;这在开发中很不可取，最后在网上查找也有没有比较简单的方法,最后建议不用浮动，用定位等其他方法。
六、伴随着css3的流行其中有两大居中方法也是使用越来越多，补充一下，
（1）首先就是flex布局，是真的方便,给父元素设置
display: flex;
align-items: center; //垂直居中
justify-content: center; //水平居中
妥妥的，
（2）就是利用translate，给要居中的元素设置如下就可以了，看起来和以前的绝对定位居中很像，但它不需要知道宽高。
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
这个最主要的原理就是利用translate 函数当中使用百分比是以该元素的内容区、补白(padding)、边框(border)为标准计算的
当然这两个居中最重要的还是兼容问题，大家根据情况而应用。