试试块级元素水平垂直居中的方法

1. absulute + margin/translate

<div class="father">
000
     <div class="son">
     111
     </div>
</div>

.father
{
	 width:600px;
	 height:400px;
     position:relative;
     background-color:#f60;
}
.son
{
     position:absolute;
	 width:200px;
     height:200px;
     background-color:#999;
     top:50%;
     left:50%;
	 margin-left:-100px;
	 margin-top:-100px;
	 /*transform:translate(-50%,-50%); 无需固定的宽高*/
}

效果图

2. absolute + margin auto

.son
{
     position:absolute;
	 width:200px;
     height:200px;
     background-color:#999;
     top:0;
     right:0;
	 left:0;
	 bottom:0;
	 margin:auto;
}

效果同上。

3. :before + inline-block + vertical-align

<div class="father">
     <div class="son">
     111
     </div>
     <div class="son">
     111
     </div>
     <div class="son">
     111
     </div>
</div>

.father
{
	 width:600px;
	 height:400px;
	 text-align:center;    /*水平居中*/
     background-color:#f60;
}

.father::before{
     content:'.';
	 height:100%;     /*400px*/
	 width:0;
	 display:inline-block;
	 vertical-align:middle;  /*垂直居中*/
	 overflow:hidden;
	 text-indent:9999px;
}

.son
{

	 width:100px;
     height:200px;
     background-color:#999;
	 display:inline-block;
	 vertical-align:middle;
}

效果图