第一种单行垂直居中（line-height）

         如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可，例如

.div-box{height:50px; line-height: 50px; width:100px; overflow: hidden; border:1px solid; }
<div class="div-box">
		垂直居中
</div>

overflow:hidden的设置是为了防止内容超出容器或者产生自动换行。如果想让文本水平也居中的话，只要添加text-align:center就行了。



第二种多行文本垂直居中（display：table）

vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display属性能够模拟<table>，采用display-table将div以表格形式显示，然后就可使用vertical-align的property属性了。

.div-box{ height:200px; display:table; border: 1px solid #f00;}
.div-box .div1{vertical-align: middle; display: table-cell;}
<div class="div-box">
	<p class="div1">
		文本垂直居中文本垂直居中
	</p>
</div>

display:table和display:table-cell，前者必须设置在父元素上，后者必须设置在子元素上，因此在设置文本垂直居中时，要为文本多添加一个div。这个方法很不错，但是不幸的是Internet Explorer 6r(甚至 IE8 beta) 并不能正确地理解display:table和display:table-cell，因此这种方法在Internet Explorer 6及以下的版本中是无效的。



第三种position+margin

div的一种方法，把top设成50%，将需要居中的文本的margin-top设为自身高度的一半，这就要保证需要居中的文本的高度，如果是不确定的可以采用js动态获取高度设置margin-top亦可以达到同样的效果。

.div-box{ position: relative;width: 30%; height: 30%; border: 1px solid #f00;}
.div-box .div1{position:absolute; top:50%;left: 50%;margin-left: -5px; margin-right: -5px;  width: 10px; height: 10px; background: #f00;}



第四种还是position+margin

position:absolute，有固定宽度和高度的div。这个div 被设置为margin:auto;top:0;bottom:0 。但是因为它有固定高度，其实并不能和上下都间距为 0，因此margin:auto;会使它居中。

.div1{position: absolute; margin: auto; top: 0;bottom: 0px;width: 100px;background: #f00;height: 100px;}

如果想要水平居中也是一样将left和right都设置为0。



第五种采用变形（transform）

这个方法不仅能实现文本垂直居中，还支持文本高度的可变性，内容块定义transform: translate(-50%,-50%)必须带上浏览器厂商的前缀，还要加上top: 50%; left: 50%;

.div-box{ position:relative; width: 50%;height: 50%; border:1px solid #f00;}
.div-box .div1{ height:100px; width:100px; position: absolute; background: #F00;left: 50%;top: 50%;transform :translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);}
<div class="div-box">
		<div class="div1">
			文本垂直居中文本垂直居中
        </div>
</div>



第六种行内块元素（Inline-Block）

很受欢迎的一种居中实现方式，基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。这个概念的解释可以参考CSS-Tricks上的文章《Centering in the Unknown》

.div-box{ text-align: center; overflow: auto; border:1px solid ; height: 500px; }
.div-box:after{content: '';   height: 100%;  margin-left: -0.25em; /* To offset spacing. May vary by font */  }
.div-box:after,.div-box .div1{  display: inline-block;  vertical-align: middle;  }
.div-box .div1{max-width: 99%; }

如果内容块宽度大于容器宽度，比如放了一个很长的文本，但内容块宽度设置最大不能超过容器的100%减去0.25em，否则使用伪元素:after内容块会被挤到容器顶部，使用:before内容块会向下偏移100%。如果你的内容块需要占据尽可能多的水平空间，可以使用max-width: 99%;（针对较大的容器）或max-width: calc(100% -0.25em)（取决于支持的浏览器和容器宽度）。



第七种采用css3新属性Flexbox

。Flexbox是CSS3新增属性，设计初衷是为了解决像垂直居中这样的常见布局问题。相关的文章如《Centering Elements with Flexbox》。

.div-box{display:display: flex; -ms-flex;display: -webkit-flex;align-items: center;-ms-flex-align: center;-webkit-align-items: center;-webkit-box-align: center;align-items: center;justify-content:center;border:1px solid ; height: 500px; }
.div-box .div1{width:50px; height:50px; border:1px solid;}

其中align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式，实现垂直居中，justify-content